Vue使用el-carousel实现页面数据轮播并每页多条
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
el-carousel实现页面每页多条数据自动轮播
大数据页面需要展示一页六条数据,按分页轮播。
最终实现效果

html部分代码:
<div class="cointan">
<div class="title1">
<div style="margin-left:25px;line-height: 22px;font-family : '优设标题黑';">
各学院学生人数
<span class="xiaobiao">/ 学院数量:{{xuelength}}</span>
</div>
</div>
<!-- 滚动块 -->
<el-carousel trigger="click" height="260px" style="height: 260px;width: 390px;margin: 44px 0 0 28px;">
<el-carousel-item v-for="(list,index) in xueyuan" :key="index">
<div class="gun">
<div class="mokuai" v-for="(item,index2) in list" :key="index2">
<div class="loudong"></div>
<div class="bgtu">{{item.college}}</div>
<div class="zongtext">
<div class="xueyuanshu">{{item.num}}</div>
</div>
<div class="zongnum">人</div>
<div class="zongline"></div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
script部分代码数据:
export default {
name: 'leftTop',
props: {
msg: String
},
data() {
return {
xueyuan:[],//各学院
xuelength:'',//学院数量
}
},
mounted(){
this.getxueyuan()
},
methods:{
//各学院人数
getxueyuan() {
this.xueyuan=[]
this.$axios.post('/jiao/api/getNumberInCollege',
{
},
{
headers: {
"token": sessionStorage.getItem('token'),//登录获取的token
},
}
).then(res => {
if (res.data.code==200) {
this.xuelength=res.data.data.length
// 课程表
res.data.data.forEach(data => {
this.xueyuan.push(data)
})
let newDataList = []
let current = 0
if(this.xueyuan && this.xueyuan.length>0){
for(let i=0;i<=this.xueyuan.length-1;i++){
if(i%6 !== 0 || i === 0 ){
if(!newDataList[current]){
newDataList.push([this.xueyuan[i]])
}else{
newDataList[current].push(this.xueyuan[i])
}
}else{
current++
newDataList.push([this.xueyuan[i]])
}
}
}
this.xueyuan = [...newDataList]
}
})
},
},
}
css部分:
<style scoped lang="scss">
.cointan{
width: 450px;
height: 302px;
background-image: url('../assets/index/litterbackground.png');
background-size: 100%;
}
.title1{
position: absolute;
margin: 9px 0 0 10px;
font-size: 20px;
color: rgba(255, 255, 255, 1);
font-weight: 400;
}
.xiaobiao{
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
}
// 走马灯滚动
.gun{
position: absolute;
margin: 0px 0 0 0px;
width: 390px;
height: 260px;
}
.mokuai{
// margin-top: 10px;
width: 390px;
height: 38px;
}
.loudong{
position: absolute;
margin: 21px 0 0 0px;
width: 7px;
height: 7px;
background: rgba(204, 204, 204, 1);
}
.bgtu{
position: absolute;
margin: 11px 0 0 14px;
font-size: 16px;
font-weight: 400;
line-height: 23.17px;
color: rgba(255, 255, 255, 1);
}
.zongtext{
position: absolute;
margin: 8px 0 0 241px;
background-image: url('../assets/leftTop/bg.png');
background-size: 100%;
width: 122px;
height: 24px;
}
.xueyuanshu{
position: absolute;
width: 86px;
height: 24px;
margin: 0px 0 0 36px;
font-size: 18px;
font-weight: 400;
line-height: 24px;
color: rgba(255, 255, 255, 1);
font-family : '优设标题黑';
text-align: center;
}
.zongnum{
position: absolute;
margin: 17px 0 0 367px;
font-size: 12px;
font-weight: 400;
line-height: 17.38px;
color: rgba(255, 255, 255, 1);
}
.zongline{
position: absolute;
margin: 37px 0 0 0px;
width: 380px;
height: 1px;
background: rgba(61, 90, 94, 1);
}
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)