1、轮播图设置属性slidesPerColumn:3实现不了，解决方案如下：
this.scheduleData是后台请求的数据，通过3个一组分组转换为this.scheduleListThreede 的数据！
2、逻辑处理如下：
computed: {
scheduleListThree: function () {
let index = 0;
let count = 3;
let arrThree = [];
let data = this.scheduleData;
for (let i = 0; i < this.scheduleData.length; i++) {
index = parseInt(i / count);
if (arrThree.length <= index) {
arrThree.push([]);
}
arrThree[index].push(data[i])
}
return arrThree
}
},
mounted() {
this.$nextTick(() => {
var swiper = new Swiper(this.$refs.scheduleSwipers, {
// slidesPerColumn: 3,//显示行，注意这里代码不用写，默认显示一行
spaceBetween:10,
autoplay: {
delay: 3000,
disableOnInteraction: false,
stopOnLastSlide: false,
},
loop: false,
observer: true,
observeParents: true,
});
})
}
3、页面处理如下：
<div class="swiper-container" ref="scheduleSwipers">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in scheduleListThree" :key="index">
<div v-for="(item1,index1) in item" :key="index1">
<!-- 展现数据用item1 即可-->
</div>
</div>
</div>文章来源：https://www.toymoban.com/news/detail-494680.html
</div>文章来源地址https://www.toymoban.com/news/detail-494680.html
到了这里，关于vue使用swiper三行轮播问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
