swiper插件同屏多个slide时在loop模式下点击切换失效的解决方案

需求：

英雄展示页面提供纵向头像滚动切换功能，需要支持循环滚动、拖动切换、前后按钮切换、点击头像图标切换等功能。

 

 

代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<div :class="$style.swiperBox">         <swiper           ref="heroSwiper"           :options="swiperOptions"           :class="$style.swiper"           @slideChange="slideChange"         >           <swiper-slide             v-for="(el, index) in imageUrl"             :key="index"             :data-id="index"             :class="$style.swiperSlide"           >             <div               class="hero_swiper_side"               :class="[                 $style.swiperItem,                 active === index && index === 0 ? $style.swiperItemFir : '',                 active === index ? $style.swiperItemActive : '',               ]"             >               <img :src="active === index ? el.l : el.s" />               <!-- @click="clickImg(index)" -->             </div>           </swiper-slide>         </swiper>         <div           :class="$style[`swiper-button-prev`]"           class="swiper-button-prev"           slot="button-prev"         ></div>         <div           :class="$style[`swiper-button-next`]"           class="swiper-button-next"           slot="button-next"         ></div>       </div>

　

swiper引入（使用了EffectCoverflow效果，可以理解为3D效果流）：

　

 

?

1 2 3 4 5 6 7 8 9 10

import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import Swiper2, { EffectCoverflow } from "swiper"; import "swiper/swiper.less";   Swiper2.use([EffectCoverflow]);     components: {     Swiper,     SwiperSlide,   },

　　

swiper配置项：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

swiperOptions: {        direction: "vertical",        // spaceBetween: 30,        slidesPerView: 5,        loop: true,        observer: true,        observerParents: true,        effect: "coverflow",        centeredSlides: true, //当前的active slide是否居中        watchSlidesProgress: true, //计算每个slide的progress        grabCursor: true,        pagination: false,        slideToClickedSlide: true,        // loopedSlides: 9,        loopAdditionalSlides: 5, // loop模式下会在slides前后复制若干个slide，前后复制的个数不会大于原来的总个数，默认为0，前后各复制1个，其他取值前后各+1        navigation: {          nextEl: ".swiper-button-next",          prevEl: ".swiper-button-prev",        },        coverflowEffect: {          rotate: 0,          stretch: 0,          depth: 0,          modifier: 0,          slideShadows: false,        },        autoplay: false,      },

　　

切换头像时需要触发角色信息的展示，这个操作配置在slideChange事件中：

?

1 2 3 4 5 6

slideChange() {      ……       const index = this.$refs.heroSwiper.$swiper.realIndex;       this.active = index;       ……     },

　　

通过this.$refs.heroSwiper.$swiper.realIndex获取到当前元素（轮播中真实的index，即此元素在轮播数组中的index），即可进行对应操作。

如果点击事件配置在slide元素中，loop模式下必定会出现部分元素点击失效的问题，因为swiper会在真实元素前后复制多个虚拟slide元素进行拼接，保证轮播效果的流畅，但复制只是复制元素而不复制事件，因此会无法触发。所以我们最好在swiper配置项中就进行事件配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

on: {   click: (event) => {     // 方案1 轮播效果有问题     let index =       event.clickedIndex - event.activeIndex + event.realIndex === 6         ? 0         : event.clickedIndex - event.activeIndex + event.realIndex;     this.$refs.heroSwiper.$swiper.slideTo(index);     // 方案2 会出现中断的情况     // this.$refs.heroSwiper.$swiper.slideTo(event.clickedIndex);     // this.active = event.realIndex;   },   // slideChangeTransitionEnd() {   //   this.slideToLoop(this.realIndex, 0, true);   // }, },

　　

以及通过这次需求学到了swiper一个新的很重要的配置项：loopAdditionalSlides，默认0（前后各复制1个）

（如果使用loopedSlides这个参数，在loop模式下是规定slidesPerview:'auto' 的同时需要配置的