解决vue-awesome-swiper点击slide选中错误的问题

问题描述

在使用loop: true模式下： 动态循环数据 ，轮播有的点击生效，有的不生效。所以不能直接在dom上进行绑定事件，在swiper上进行绑定。

解决方法

html代码如下：

<swiper ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="(item, index) in noticeList" :key="index">
                <div class="notice-item">
                  <div class="notice-new" v-if="index === 0">NEW</div>
                  <div class="notice-tips" v-else></div>
                  <p class="notice-txt">{{item.noticeTitle}}</p>
                  <div class="notice-time">{{item.updateTime ? parseTime(item.updateTime, '{y}-{m}-{d}') : parseTime(item.createTime, '{y}-{m}-{d}')}}</div>
                </div>
              </swiper-slide>

            </swiper>

data() {
	let _this = this;
	return {
		swiperOptions: {
        direction : 'vertical',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop : true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 4,
        spaceBetween: 0,
        observer: true,
        observeParents: true,
        on: {
          click : function () { // 在这里点击会触发整个slide
            _this.handleInvite(this);
          }
        }
      },
	}
}

由于是loop:true模式，必须要重新计算，才能获取准确的下标。

handleInvite(vm) {
      let index = vm.clickedIndex - vm.activeIndex + vm.realIndex; // 由于swiper是loop:true模式，需重新计算才可得到真实的index下标
      if (index === this.noticeList.length) {
        index = 0;
      } else if (index === this.noticeList.length +1) {
        index = 1;
      } else if (index === this.noticeList.length +2) {
        index = 2;
      }
      // 得到的index就是点击的item在实际数组中的下标index
      this.noticeDetail(this.noticeList[index])
    },

这样就解决问题啦~