在Vue项目中，使用Swiper插件时遇到在loop模式下无法正确操作当前swiper-slide的问题。由于Swiper在循环模式下复制了slide，导致activeIndex失效。通过分析DOM结构，发现可以通过swiper-slide-active类来定位当前slide。解决方案是在transitionStart回调中动态添加自定义类名，从而实现对当前slide的操作。本文旨在记录解决这一问题的过程。
一、问题描述
在开发一个 Vue 项目时，用到了 Swiper 插件，别问我为什么不用 vue-awesome-swiper，因为要自定义一些东西，用不惯 vue-awesome-swiper。好了，回到正题，下面是要实现的两个效果：
1.当前的 swiper-slide 使用高亮的背景色，其他的使用暗淡的透明色。
2.不同的 swiper-silde 有不同的子项内容，所以要根据当前的 swiper-slide 来进行显示隐藏。
我原本的想法是在 data 里通过一个变量来记录当前的 activeIndex 然后每次 swiper-slide 切换的时候把当前的下标赋值给 activeIndex 然后通过 activeIndex 与动态渲染时的 index 进行比对，如果相同证明是当前的 swiper-slide，然后添加自定义类名进行操作就可以了。
但是在 codeing
最低0.47元/天 解锁文章
5086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
