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) {
     ···
}