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

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

组件中:

<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;
      }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容