情景介紹
vue
+typescript
+vue-awesome-swiper
項目,首頁輪播使用vue-awesome-swiper
,banner數據從服務器端加載。
數據加載需要時間,如果直接載入vue-awesome-swiper
,結果是swiperOption
配置的loop: true
不生效:
swiperOption: {
loop: true,
}
猜想
猜測原因就是初始化的時候沒有足夠的元素swiper-slide
,所以沒有執行復制元素的操作,就沒有loop
。
爲了驗證這個猜測,做了一下幾個嘗試:
- 初始化banner長度爲1,服務器返回的長度爲4,運行。
結果是loop依然沒有生效。
?loop沒響應或者缺少監聽器observer - 加入
observer: true
屬性進行監聽,再運行。依然不生效。
?observer不生效 - 瀏覽器控制檯執行元素刪除操作。
滑塊的頁腳同時變化
!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的友情鏈接~