vue-awesome-swiper非同步載入資料，初始化的loop不生效——解決及猜想

摘要： 情景介紹 vue +typescript +vue-awesome-swiper 專案，首頁輪播使用vue-awesome-swiper ，banner資料從伺服器端載入。 資料載入需要時間，如果直接載入...

情景介紹

vue +typescript +vue-awesome-swiper 專案，首頁輪播使用vue-awesome-swiper ，banner資料從伺服器端載入。

資料載入需要時間，如果直接載入vue-awesome-swiper ，結果是swiperOption 配置的loop: true 不生效：

swiperOption: {
loop: true,
}

猜想

猜測原因就是初始化的時候沒有足夠的元素swiper-slide ，所以沒有執行復制元素的操作，就沒有loop 。

為了驗證這個猜測，做了一下幾個嘗試：

1. 初始化banner長度為1，伺服器返回的長度為4，執行。

   結果是loop依然沒有生效。

   ？loop沒響應或者缺少監聽器observer

2. 加入observer: true 屬性進行監聽，再執行。
   依然不生效。
   ？observer不生效
3. 瀏覽器控制檯執行元素刪除操作。

   滑塊的頁尾同時變化

   ！observer生效——loop不響應

結論

loop屬性不是響應式的，資料變動之後不會自動初始化整個滑塊

解決

開始的時候，想的辦法是初始化設定init: false ，獲取資料之後再執行init() ，可以解決該問題。

後來看了一篇文章，可以對資料長度做一個判斷：

<swiper v-if="banner.length > 0" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

增加這個判斷之後，loop的問題解決了。

原因是隻有banner.length > 0 的時候，才會掛載swiper ，只有掛在之後才會執行初始化的init 操作，所以可以確保loop 執行的時候，滑塊元素swiper-slide 是存在且完整的，完美解決！

結語

解決bug的友情連結 ～