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