代码片段:
<template>
<el-carousel indicator-position="outside" :loop="true" trigger="click" class="msfcListUl">
<el-carousel-item v-for="(item1,index) in msfcList" :key="index" class="car-item">
<div class="flexDiv itemDiv" v-for="(item, index2) in item1" :key="index2">
<div class="left">
<p class="imgBox"><img :src="item.Cover" alt=""></p>
</div>
<div class="right">
<i>{{item.Title}}</i>
<em>{{item.Author}}</em>
<p class="detail"><a :href="item.Url">{{item.Describe}}</a></p>
</div>
</div>
</el-carousel-item>
</el-carousel>
</template>
msfcList是后台返回数据
方法:
created(){
let newDataList = []
let current = 0
if(this.msfcList && this.msfcList.length>0){
for(let i=0;i<=this.msfcList.length-1;i++){
if(i%2 !== 0 || i === 0 ){
if(!newDataList[current]){
newDataList.push([this.msfcList[i]])
}else{
newDataList[current].push(this.msfcList[i])
}
}else{
current++
newDataList.push([this.msfcList[i]])
}
}
}
this.msfcList = [...newDataList]
}
css
/deep/.el-carousel__container{
height: 268px;
.car-item {
width: 100%;
display: flex;
.itemDiv{
margin-right: 44px;
}
}
}
|