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

framework7框架访问地址:https://framework7.io/vue/swiper.html
Swiper API : http://idangero.us/swiper/api/

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

...

      
   

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

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

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

image.png

属性名：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的属性。

官方示例写法：

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