使用h5 swiper的loop属性时候踩坑

【背景】一个业务需求，循环滑动展示一些信息，第一反应就是swiper可以啊，节省了自己不断计算和跳转的成本

【遇到的问题】我做的是一个pc多个列表循环展示的功能，然后每个单独项目是封装了一个组件，组件上有当前展示的信息相对应的一些交互操作，开发完成之后，在测试时候发现循环展示每次在首位相接的那个组件处，当前slide中渲染的卡片上的交互全部都点击无效。查阅文档解释如下：

官方文档在这里：loop_Swiper参数选项

loop设置为 true 则开启循环(loop)模式。

loop模式：会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来像是循环的。 
复制的slide 上有一些额外的类名代表他是生成的。


loop 模式如果与 slidesPerView: 'auto' 一起使用，需要设置 loopedSlides 指定要循环（重复）的幻灯片数量。

【分析解决过程】

我在使用的过程中是给循环的时候每一项设置了id的，我打印id发现，在复制的slide里面，id和外部循环呈现的id是有差异的，所以swiper里面是集成了自己的循环list的，同时，loop模式下的swiper拷贝的只是dom元素本身，并没有一同拷贝dom元素的索引和交互，因此，我们在swiper的事件里面，打印this.activeIndex，我们可以发现，activeIndex 在循环列表里面很多时候数值是远远大于列表总数的，这个过程中我主要关注了滑动时候的三个参数：realIndex、activeIndex、previosIndex，详见文档：mySwiper.realIndex_Swiper参数选项

realIndex：当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。

activeIndex: 返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。

previousIndex: 返回上一个活动块的索引，切换前的索引。

（1）如果仅仅改变样式，可以通过activeIndex，设置dom中的样式

（2）因为我的slide中存在交互，所以从真实模块中着手解决，如果复制的模块中没有交互，我们考虑是不是可以直接滑动到原始模块我一开始的方案,swiper中提供的滑到指定模块的方法：

一开始，我将这个方法放置在slidechange方法中，滑动到真实模块,但是效果上会有戛然而止的感觉mySwiper.slideToLoop(index, speed, runCallbacks)_Swiper参数选项

 on: {
    slideChange() {
         this.slideToLoop(this.realIndex, 0, true);
    }
}
            

 这时候我看到了这篇文章的解决——vue-awesome-swiper开启loop模式后复制slide引出的问题及解决方案_nothing_more_than的博客-CSDN博客

重点在评论区，将slide事件放置在slideChangeTransitionEnd 方法中（回调函数，swiper从一个slide过渡到另一个slide结束时执行）（slideChangeTransitionEnd(swiper)_Swiper参数选项），彻底解决了这一问题，实际上就是swiper先滑到了复制dom，然后0ms内滑动到了realIndex标记的真实slide的位置，对于用户是无感知的，但是实际上已经移动到了有交互的卡片，至此，问题解决~

具体写法如下

            swiperOptions: {
                loop: true, // 循环
                speed: 1000,
                on: {
                    slideChangeTransitionEnd() {
                        this.slideToLoop(this.realIndex, 0, true);
                    }
                }
            }

 解决过程纠结好久，差点自己重写一个swiper滑动了，特此记录