首頁猿問 vue中v-for配合使用swip...

vue中v-for配合使用swiper的問題

JavaScript

慕桂英3389331 2018-11-13 11:27:54

在vue頁面中獲得數據，并在mounted中將值賦值符data中的lists值，例如 this.lists=this.$route.params.lists;但是lists的長度是不確定的，所以只能通過v-for 來將數據進行展示 <div v-for="item in lists">{{item.a}}</div>想要將這組數據通過swiper進行展示 <div class="banner swiper-container" @click="aa()"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in lists">{{item.a}}</div> </div> <div class="swiper-pagination"></div> </div>js如下： this.swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 'auto', centeredSlides: true, paginationClickable: true, spaceBetween: 20, onSlideChangeEnd: function(swiper) { console.log(swiper); }});這個時候頁面展示就會出現出現卡頓，并不能進行輪播轉換，但是如果.swiper-slide的數量是確定的就會正常顯示，這個問題如何才能解決能？

查看完整描述

1 回答

當年話下

TA貢獻1890條經驗獲得超9個贊

this.lists=this.$route.params.liststhis.$nextTick(() => {    
    this.swiper = new Swiper('.swiper-container', {            pagination: '.swiper-pagination',            slidesPerView: 'auto',            centeredSlides: true,            paginationClickable: true,            spaceBetween: 20,            onSlideChangeEnd: function(swiper) {    
                console.log(swiper);
            }
      })
})

反對回復 2018-11-13