<swiper :options="swiperOption" ref="mySwiper" v-if="swiperReset">
<!-- 首页轮播广告图片 -->
<swiper-slide v-for="(item, index) in swiperList" :key="index">
<img class="index_img" :src="item" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
由于循环播放时是在轮播图片的首尾各加上一个slide,且在swiperList发生变化时,渲染不到加上的slide,所以会出现首页往前翻页时显示的是之前缓存着的图片,解决的方法是在swiper组件上加上一个v-if。
this.swiperReset= false
this.$nextTick(() => {
this.swiperReset= true
})
这是因为在 v-if 切换的时候,其所在的元素及它的绑定数据和组件会先被销毁再重建。