正文

vue swiper点击后返回不能自动播放

IP云
IP云V管理员/11 阅读
08/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

解决方法： 在返回时重新开启轮播

组件中：

<swiper :options="swiperOption" ref="mySwiper" :class="ifSlide?'':'swiper-no-swiping'">
<swiper-slide v-for="(picitem,index) in swiperList" :key="index">
<img :src="picitem.imgpath" :gid="picitem.gid" :type="picitem.type" :bigsort="picitem.bigsort" alt="" style="display:inline-block;width:100%;height:100%;">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>

data中:

option:{
notNextTick: true,
loop: true,
autoplay: 3000,
speed: 800,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
observer: true, //启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
observeParents: true,
debugger: true
},
swiperOption:{ }

created() {
this.initSwiper();
},
methods:{
initSwiper: function() {
this.swiperOption = option;
}
}