Vue項目中獲取數(shù)據(jù)后使用swiper輪播，無法輪播且 autoplay 和 loop 失效問題！

問題表現(xiàn)：輪播組件顯示第一張圖，可拖動但無法切換到下一張圖。但是F12控制臺切換屏幕后能正常輪播但無法loop循環(huán)。

問題關(guān)鍵：輪播數(shù)據(jù)是發(fā)起請求后傳入swiper組件的，數(shù)據(jù)還沒獲取完全，而swiper組件已經(jīng)開始初始化了

所以需要等待請求完成后再初始化輪播！
解決辦法：v-if 來控制輪播組件是否初始化,項目是3張圖輪播，這里通過判斷數(shù)據(jù)數(shù)組長度是否為3來控制。

<mySwiper :swiper="homeBanners" v-if="homeBanners.length === 3"></mySwiper>

總結(jié)

以上是生活随笔為你收集整理的Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。