1.轮播使用的vue-awesome-swiper,想用属性slidesPerColumn:3,一直实现不了,在vue中使用的swiper结构是,网上也没找到例子,官方文档的结构又不同
<swiper :options="xxx">
<swiper-slide v-for="(item,index) in xxx" :key="index">
</swiper-slide>
</swiper>
2.换种方法,自己将请求来的数据分组,每组三个,计算方法借鉴的网上的,songdata是请求来的数据数组,
computed: {
songlist:function(){
let index =0;
let count = 3;
let arrSongs = [];
let data = this.songdata;
for(let i=0;i<this.songdata.length;i++){
index = parseInt(i/count);
if (arrSongs.length <= index) {
arrSongs.push([]);
}
arrSongs[index].push(data[i])
}
return arrSongs
}
},
3.之后swiper示例层级如下
<swiper :options="xxx">
<swiper-slide v-for="(item,index) in songlist" :key="index">
<div v-for="(item1,index1) in item" :key="index1">
<!-- 展现数据用item1 -->
</div>
</swiper-slide>
</swiper>
4.想要的效果就像这样,最后可以实现