vue-awesome-swiper使用自動輪播和循環輪播不生效(loop和autoplay)

方法一：

在項目中使用vue-awesome-swiper若是loop和autoplay老是出現各類問題,第一次加載的時候,輪播是不動的,須要從新加載一下swiper纔會輪播

解決方案:

//輪播設置
swiperOption: {
　　direction: 'vertical',
　　observer:true,//修改swiper本身或子元素時，自動初始化swiper 
　　observeParents:true,//修改swiper的父元素時，自動初始化swiper 
　　loop:true,
　　autoplay: {
　　　　delay: 2000,
　　disableOnInteraction: false
　　}
}

須要添加上兩個屬性,這樣達到一個初始化swiper的目的

observer:true,//修改swiper本身或子元素時，自動初始化swiper 
observeParents:true,//修改swiper的父元素時，自動初始化swiper

 

方法二：

在vue項目中常常會用輪播圖，我通常用vue-awesome-swiper這個插件。咱們輪播圖片通常經過後端獲取，循環展現，但會出現循環輪播失效的問題。緣由是循環尚未完的時候swiper組件運行衝突出錯致使的，在swiper組件上對數據價格v-if就能夠解決。代碼以下：