swiper初始化党瓮,圖片不輪播
原因:swiper的初始化在數(shù)據(jù)加載完成之前,異步了
解決方法:
- 在數(shù)據(jù)調(diào)用結束后再進行swiper初始化盐类。實現(xiàn)原理是通過vue自帶的nextTick方法寞奸,它會在數(shù)據(jù)變化之后,DOM更新以后進行回調(diào)函數(shù)在跳,在把輪播圖放在回調(diào)函數(shù)里
- 在swiper初始化的時候加上兩個屬性(observer:true枪萄、observeParents:true)。實現(xiàn)原理是如果不是輪播圖的情況下猫妙,直接在初始化時加上observer(修改swiper自己或子元素時瓷翻,自動初始化swiper)、observeParents(修改swiper的父元素時割坠,自動初始化swiper)這兩個參數(shù)就行了齐帚,會在數(shù)據(jù)變化時,再進行初始化
- 在加載組件時用v-if判斷彼哼,實現(xiàn)原理是通過雙向數(shù)據(jù)綁定对妄,給他綁定一個空數(shù)組,判斷這個數(shù)組有l(wèi)ength時渲染