vue解決swiper動態改變數據后,分頁混亂和點擊左右箭頭無效


問題描述:在動態改變swiper時會出現,分頁數據錯亂、沒變化,點擊左右箭頭沒反應。

在網上嘗試了各種辦法,給swiper設置屬性observe:true,或者改變數據后調用mySwiper.update()函數進行更新,

發現沒有用,最后發現將swiper部分用子組件來使用,通過強制更新子組件來更新swiper數據。

解決辦法:
1、將輪播圖部分,當成子組件使用。並給子組件綁定一個key值,為了能夠讓子實時組件更新。

 

 

2、將swiper初始化數據在子組件mounted時期調用

3、最后將改變后的數據賦值給子組件,同時給子組件賦值一個新的key值。這樣動態改變swiper數據就不會出現分頁錯亂和點擊箭頭無效了。

寫在最后:可能還有更簡單的辦法,如果有大佬懂的,可以留言。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM