vue使用swiper輪播組件開啟loop模式時的問題總結

最近在vue項目中使用了swiper插件來完成輪播功能，沒有開啟循環模式，一切都很順利

具體怎么在vue項目中引入swiper插件，這個太簡單就不提了，上代碼

html

<div class="swiper-container">
       <div class="swiper-wrapper">
          
            <template v-if='banner.length > 0'>
              <div class="swiper-slide" v-for="x in banner" @click="openSeries(x)">
                <img :src="func(x)" alt="" >
              </div>
            </template>

       </div>
       <div class="swiper-pagination"></div>
</div>

script

              $.ajax({
                  url: vm.programListUrl,                  //輪播圖
                  data: data,
                  type: "GET",
                  success: function (res) {
                    res = JSON.parse(res);
                    vm.newData = res;
                    //獲取banner圖
                    vm.banner = vm.newData.list;
  
                    //初始化輪播圖
                    vm.swiper = new Swiper('.swiper-container', {
                      pagination: '.swiper-pagination',
                      paginationClickable: true,
                      centeredSlides: true,
                      notNextTick: true,
                      autoplay: 5000,
                      autoplayDisableOnInteraction: true,

                      observer: true,       //修改swiper自己或子元素時，自動初始化swiper
                      observeParents: true, //修改swiper的父元素時，自動初始化swiper
                      onSlideChangeStart: function (swiper) {
                        //console.log(swiper.activeIndex)
                      }
                      
                    });

                  },
                  error: function (er) {
                    console.log(er);
                  }
              });

后來產品說輪播部分要和APP一樣是無限循環的，那不簡單，在初始化輪播的配置里開啟一下無限模式不就OK了，loop: true，這不太簡單了么，

然而，前端的世界沒我想象的那么簡單，一系列問題隨之而來

▂▂▂▂__▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂__▂▂▂▂

首先，開啟輪播后，當從前到后一張張滑動，到最后一張滑向第一張時，第一張圖總是一閃而過，直接就到第二張圖了，我勒個去

一百度，原來是因為 在ajax中初始化輪播的問題，在獲取數據后數據后要重新初始化一下，這就需要用到vue的$nextTick這個大殺器了，

這樣一來，問題被完美的解決了，滑來滑去好順暢，上代碼

 

 

                //初始化輪播圖
                vm.swiper = new Swiper('.swiper-container', {
                      pagination: '.swiper-pagination',
                      paginationClickable: true,
                      centeredSlides: true,
                      notNextTick: true,
                      //freeMode:true,
                      loop: true,
                      autoplay: 5000,
                      autoplayDisableOnInteraction: true,

                      observer: true,//修改swiper自己或子元素時，自動初始化swiper
                      observeParents: true,//修改swiper的父元素時，自動初始化swiper
                      onSlideChangeStart: function (swiper) {
                        //console.log(swiper.activeIndex)
                      },
                      onClick: function(swiper){
                        var x = JSON.parse(swiper.clickedSlide.attributes["data-href"].nodeValue)
                        //console.log(x );
                        vm.openSeries(x);
                      }
               });

               vm.$nextTick(()=>{ vm.swiper.init() // 再初始化swiper })

 

 

 

═∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞═

然后，點擊了一下圖片，跳轉事件也執行了，可是從最后一張繼續滑動到第一張的時候再點擊第一張就尷尬了，怎么點都沒反應

我突然就想到了，swiper在loop模式下的原理是slides前后會復制若干個slide，從而形成一個環路來實現無縫輪播的，問題就出在這些復制的slide上

它沒有復制綁定在dom上的click事件，復制的swiper-slide點擊事件無效。

從swiper文檔中看到 可以使用onclick回調函數觸發點擊事件

 入口

那這樣就又解決了這個問題，但是我的方法要傳當前的item 對象過去，只好在DOM上綁定自定義屬性時，將當前的item對象轉換為字符串，

在onclick中拿到數據后再轉換為對象

上代碼

<div class="swiper-slide" v-for="x in banner" :data-href="func_str(x)">
      <img :src="func(x)" alt="" >
</div>

func_str(item){
        return JSON.stringify(item);
},

onClick: function(swiper){
     var x = JSON.parse(swiper.clickedSlide.attributes["data-href"].nodeValue)
     //console.log(x );
     vm.openSeries(x);
}

這樣戰勝種種困難，終於完成了這個小小的輪播需求，前端不容易啊！ 希望能幫到有同樣需求的朋友！