Swiper手动滑动后，自动滑动失效问题解决

framework7框架访问地址:https://framework7.io/vue/swiper.html
Swiper API : http://idangero.us/swiper/api/
中文版 Swiper API： https://www.swiper.com.cn/api/

本代码使用framework7+vue框架，使用了Swiper API来解决轮播滑动问题。
一开始代码是这样的，注意 示例不能运行，调试时发现，页面加载出来的时候图片可以轮播，但是手动滑动之后，页面的图片不再自动轮播。

...
<f7-swiper v-if="bannerList.length" :params="swiperParams" pagination ref="mySwiper">
      <f7-swiper-slide v-for="banner in bannerList" :key="banner.id">
   </f7-swiper-slide>
</f7-swiper>
<script>
  export default {
     data () {
          swiperParams: {
          speed: 500,
          loop: true,
          autoplay: {
            delay: 2500,
          },
          preventLinksPropagation: false   // 阻止点击事件冒泡
       },
     } 
   }
</script>

官网示例是这样的,f7引用的格式不一样，但是配置方法是一致的。

var mySwiper = new Swiper('.swiper-container', {
    speed: 500,
    loop: true,
    autoplay: {
      delay: 2500,
    }
    ...
});

然后查询官方Swiper API : http://idangero.us/swiper/api/，通过慢慢摸索，找到了一个可以解决手动滑动后，自动滑动失效问题。

 

 

 

属性名：disableOnInteraction：
属性值：boolean true
解释：Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction
中文意思就是：当disableOnInteraction:false 的时候，手动滑动之后，自动滑动不会失效，每次手动滑动之后，自动滑动会再开启。

 

修改后的代码：

注意：disableOnInteraction是autoplay的属性。

<f7-swiper v-if="bannerList.length" :params="swiperParams" pagination ref="mySwiper">
      <f7-swiper-slide v-for="banner in bannerList" :key="banner.id">
   </f7-swiper-slide>
</f7-swiper>
<script>
  export default {
     data () {
          swiperParams: {
          speed: 500,
          loop: true,
          autoplay: {
            disableOnInteraction: false,
            delay: 2500,
          },
          preventLinksPropagation: false   // 阻止点击事件冒泡
       },
     } 
   }
</script>

官方示例写法：

var mySwiper = new Swiper('.swiper-container', {
    speed: 500,
    loop: true,
    autoplay: {
      disableOnInteraction: false,
      delay: 2500,
    }
    ...
});

 

原文链接：https://www.jianshu.com/p/f1c6395314f2