1、輪播圖設(shè)置屬性slidesPerColumn:3實現(xiàn)不了，解決方案如下：
this.scheduleData是后臺請求的數(shù)據(jù)，通過3個一組分組轉(zhuǎn)換為this.scheduleListThreede 的數(shù)據(jù)！
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">?
????????????????????????<!-- 展現(xiàn)數(shù)據(jù)用item1 即可-->
???????????????????</div>
? ? ? ? ? ? ?</div>
?????</div>文章來源：http://www.zghlxwxcb.cn/news/detail-494680.html
</div>文章來源地址http://www.zghlxwxcb.cn/news/detail-494680.html
到了這里，關(guān)于vue使用swiper三行輪播問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
