1.结构
<el-carousel arrow="always" :autoplay="false" indicator-position="none">
<el-carousel-item v-for="(item, index) in dataList2" :key="index">
<div class="imgl">
<div class="imgdet" v-for="(item1, index1) in item" :key="index1" @click="huigu(item1.id)">
<img :src="item1.cover" alt="" />
<p class="text">{
{
item1.title }}</p>
</div>
</div>
</el-carousel-item>
</el-carousel>
2.在不同屏幕显示不同的张数
var Width = document.body.clientWidth
console.log(Width)
if (Width >= 1200) {
this.dataList2 = this.formatArray(this.dataList1, 4)
} else if (768 <= Width < 1200) {
this.dataList2 = this.formatArray(this.dataList1, 2)
}
if (Width < 768) {
console.log(Width)
this.dataList2 = this.formatArray(this.dataList1, 1)
}
3.函数
formatArray(data, num) {
var dataList2 = []
for (var i = 0, len = data.length; i < len; i += num) {
dataList2.push(data.slice(i, i + num))
}
return dataList2
},