美文网首页
在vue中使用vue-awesome-swiper切换页面后轮播

在vue中使用vue-awesome-swiper切换页面后轮播

作者: 忽然之间s | 来源:发表于2021-04-22 09:56 被阅读0次

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);
}

相关文章

网友评论

      本文标题:在vue中使用vue-awesome-swiper切换页面后轮播

      本文链接:https://www.haomeiwen.com/subject/ugdxrltx.html