Vue2使用Swiper6.8踩坑记录

 关于loop：true后swiper-slide第二轮轮播点击事件不起效

loop:true模式是会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的，但是slide中的事件并未被复制，所以造成事件不起效。

解决办法：

完成html相关布局：

 <div class="swiper-container yang">
          <div class="swiper-wrapper">
            <div :class="['swiper-slide']" v-for="(item,index) in allmodel" :key="index">
              <div
                @mouseenter="enterleft(index%4,$event)"
                @mouseleave="leaveleft(index%4,$event)"
                :class="['slidercon',index%4<2?'leftswiper':'rightswiper']"
              >
                <div>
                  <img :src="item.src" alt>
                </div>
                <p class="wordp">{{item.name}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-prev" slot="button-prev">
          <img src="../assets/images/home/111.png" alt>
        </div>
        <div class="swiper-button-next" slot="button-next">
          <img src="../assets/images/home/222.png" alt>
        </div>
      </div>

编写js代码，在mounted的new Swiper中使用on方法，对点击事件进行重写

关于多个slide为一组后swiper-slide中元素的鼠标事件在第二轮轮播不起效

为了解决在slide中的div中的鼠标事件执行，可同时复写slideChangeTransitionEnd（此方法释义可参考swiper文档）在方法中找到。

解决鼠标事件的思路大概是：如果切换到的slide具有swiper-slide-duplicate类名，就让当前这个slide切换到当前swiper的realIndex的那个slide。

const mySwiper = new Swiper(".yang", {
      slidesPerView: "auto", //一次性显示slide的数量,auto表示自定义slide宽度
      // grabCursor:true,  //鼠标变成小手
      observeParebts: true, //修改swioer的父元素时自动初始化swiper
      preventClicksPropagation: false, //拖动slide时阻止click冒泡
      // slideToClickedSlide:true, //true---点击slide会自动过渡到这个slide
      // slidesPerGroup:3,   //3个为一组
      pagination: {
        el: ".swiper-pagination"
      },
      spaceBetween: 100, //间隔
      loop: false, //自动循环,开始和结束无缝循环
      on: {
        click: event => {
          // console.log(event.clickedIndex);
          if (event.clickedIndex != undefined) {
            this.shownum(this.allmodel[event.clickedIndex % 9].url);
          }
        },
        // 解决loop无缝衔接时mouseenter、mouseleave失效问题----因为swiper复制的时候不带事件，此时解决方法就是将其无感跳转到第一遍的图片中，PS：会有一瞬间的闪动
        slideChangeTransitionEnd: event => {
          if (mySwiper) {
            const { realIndex, activeIndex } = mySwiper;
            const itemSlideDom = mySwiper.slides[activeIndex + 3];
            if (itemSlideDom.className.indexOf("swiper-slide-duplicate") > 0) {
              mySwiper.slideTo(realIndex, 0, true);
            }
          }
        }
      },
      // 导航按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
      //   //   // 自动开始
      //     autoplay: {
      //       delay: 2500,   //时间间隔
      //       disableOnInteraction: false,   //手动操作轮后不会暂停
      //     }
    });