在vue中使用vue-awesome-swiper切換頁面后輪播失效

1、在項目中使用vue-awesome-swiper插件時,用的是@3的版本,此時對應的swiper是@4的版本。
2、在vue項目的單頁面開發中,我們將頁面設置了keep-alive后,假設在A頁面用到swiper輪播,并切換到B頁面時,再返回到A頁面,此時A頁面自動輪播失效了。

以上場景遇到的問題,解決方法如下:

// template標簽部分
<div v-if="reRender">
<div class="swiper-box" v-if="swiperList && swiperList.length > 0">
     <swiper :options="swiperOption" ref="mySwiper" class="swiper-item">
           <swiper-slide class="swiper-list" v-for="(item, index) in swiperList" :key='index'>
               {{ item.xxx}}
           </swiper-slide>
       </swiper>
   </div>
</div>
// js部分
activated() {
    this.reRender = false;
        setTimeout(() => {
            this.reRender = true;
    }, 100);
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容