vue——使用輪播組件swiper，設置 loop為true后，點擊事件失效及輪播索引錯亂問題

參考：https://www.cnblogs.com/toggle/p/9618331.html

           https://www.cnblogs.com/tangbuluo/p/11248655.html 

 

需求：用swiper3做一個輪播圖，無限循環，滑動時切換序號，點擊可進入商品詳情頁。大概如下

 

 

 

問題代碼：

<div id="swiper-goods" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swiperList" @click="toDetail(item)">
               ·····
        </div>
    </div>
</div>         

 

問題：當第一次滑動結束時進行左滑/第二次滑動開始時進行右滑，點擊事件失效。

 

原因：swiper的無限輪播時，會自動復制第一個和最后一個頁面進行輪播。

               但由於只復制頁面沒有復制點擊事件，所以在頁面循環一周回來遇到復制的頁面時，點擊事件就會失效。

 

解決方法：在初始化swiper時，綁定點擊事件，參數通過屬性動態綁定。

<div id="swiper-goods" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swiperList" :data-item="func_str(item)">
               ·····
        </div>
    </div>
</div>   

initSwiper_goods: function() {
    let _this = this;
    var mySwiper = new Swiper("#swiper-goods", {
          autoplay: 3000,
          loop: true,
          autoplayDisableOnInteraction: false,
          preventLinksPropagation: false,
          lazyLoading: true,
          pagination: '.swiper-pagination',
          observer: true, //修改swiper自己或子元素時，自動初始化swiper
          observeParents: true, //修改swiper的父元素時，自動初始化swiper
          onClick: function(swiper) {
            let item = JSON.parse(swiper.clickedSlide.attributes["data-item"].nodeValue);//轉換為對象
            _this.toDetail(item);
          },
          onSlideChangeEnd: function(swiper) { //切換結束時，獲取slide序號
            _this.swiperIndex = swiper.realIndex+1; //realIndex: 當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將復制的塊的數量計算在內。
          }
     })
},

func_str: function(item) {   //將當前的item對象轉換為字符串 return JSON.stringify(item);
},

toDetail: function(item) { ··· }