vue項目中swiper動態更新後無法輪播問題 附帶案例代碼

swiper是很常用的一個組件，我項目中用到的版本是4.1.6。剛開始，我就按照官網的案例寫了個demo，當然圖片都是靜態寫死的，確實可以輪播了，但是我項目的需求是要動態修改輪播圖的內容。然後我就改成vue的方式了，js和css是通過cdn引入的。下面是swiper的全部代碼：

有問題請加羣交流java羣：200909980，vue羣：128806068 ，或者在下邊評論

vue template 代碼

輪播內容是通過循環數組自動生成的

<div class="swiper-container" v-if="markInfo.attachs && markInfo.attachs.length!=0">
    <div class="swiper-wrapper">
       <div class="swiper-slide" v-for="item in markInfo.attachs">
           <img :src="item.url" alt="" height="100%">
        </div>
     </div>
     <!-- 如果需要分頁器 -->
     <div class="swiper-pagination"></div>
     <!-- 如果需要導航按鈕 -->
     <div class="swiper-button-prev"></div>
      div class="swiper-button-next"></div>
</div>

vue js

methods: {
  initSwiper () {
     let _this = this
     _this.mySwiper = null
     _this.mySwiper = new Swiper('.swiper-container', {
          autoHeight: true, //enable auto height
          spaceBetween: 20,
          pagination: {
             el: '.swiper-pagination',
             clickable: true,
          },
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
         },
    })
  }
}

動態修改數據的回調

Commons.signals.changeSwiper.add((mark) => {
     _this.markInfo = mark //這塊數據修改後，for循環會自動修改數據，但是並不會輪播，所以需要下邊的代碼重新渲染
     if(mark.attachs && mark.attachs.length!=0){//沒有數據不重新渲染
         // DOM更新了
         _this.$nextTick(() => {
           _this.initSwiper()// swiper重新初始化
         })
      }
})

到此解決方案就完畢了。下邊是一些其他的解決思路，但是我這邊試了是不行的，可能是我的這塊配置有問題，但是可以給大家說一下思路。

---

其他解決思路

1.先把之前所有的內容清空掉，然後一個個增加新的數據，但是我這裏remove報錯了。

_this.mySwiper.removeAllSlides()
_this.markInfo.attachs.forEach((el, index) => {
    _this.mySwiper.appendSlide('<div class="swiper-slide"><img src="'+el.url+'" alt="" height="100%"></div>'); //加到Swiper的最後
 })

2.把之前的組件銷燬，然後重新創建，new Swiper，但是我這銷燬的時候報錯了。

_this.mySwiper.distory(false)
_this.initSwiper()// swiper重新初始化

3.修改爲數據後，調用update方法，然後startAutoplay,當然我這裏也不行

以上方法，大家都試試，可能是我這裏環境問原因吧

關注

如果有問題，請在下方評論，或者加羣討論 128806068

關注下方微信公衆號，可以及時獲取到各種技術的乾貨哦，如果你有想推薦的帖子，也可以聯繫我們的。