一、问题描述
在开发一个 Vue 项目时,用到了 Swiper 插件,别问我为什么不用 vue-awesome-swiper,因为要自定义一些东西,用不惯 vue-awesome-swiper。好了,回到正题,下面是要实现的两个效果:
1.当前的 swiper-slide 使用高亮的背景色,其他的使用暗淡的透明色。
2.不同的 swiper-silde 有不同的子项内容,所以要根据当前的 swiper-slide 来进行显示隐藏。
![效果图](https://i-blog.csdnimg.cn/blog_migrate/0dc0a5a80a4f450ff018737821080c22.gif)
我原本的想法是在 data 里通过一个变量来记录当前的 activeIndex 然后每次 swiper-slide 切换的时候把当前的下标赋值给 activeIndex 然后通过 activeIndex 与动态渲染时的 index 进行比对,如果相同证明是当前的 swiper-slide,然后添加自定义类名进行操作就可以了。
但是在 codeing