1、在項(xiàng)目中使用vue-awesome-swiper插件時(shí),用的是@3的版本,此時(shí)對(duì)應(yīng)的swiper是@4的版本。
2、在vue項(xiàng)目的單頁(yè)面開發(fā)中,我們將頁(yè)面設(shè)置了keep-alive后,假設(shè)在A頁(yè)面用到swiper輪播,并切換到B頁(yè)面時(shí),再返回到A頁(yè)面,此時(shí)A頁(yè)面自動(dòng)輪播失效了。
以上場(chǎng)景遇到的問題,解決方法如下:
// template標(biāo)簽部分
<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);
}