问题描述

在Vue项目中使用swiper组件，渲染滚动列表，列表需要有点击出详情功能，实际使用中发现在loop模式下，slide的点击事件丢失，出现BUG

解决思路

loop模式下，是swiper主动复制足够多的slide加入滚动列表，从而表面上看出是无缝滚动的样式，猜测是因为dom复制的问题，导致这一部分的点击事件丢失

解决方案

1.github中显示swiper的事件中有@click-slide的事件，通过监听事件解决问题

但实际操作中发现，无法监听到绑定的事件监听，猜测可能与版本有关

项目中使用版本为3，文档版本为5 ，所以该方法不可用

如遇到相同问题的同学，使用版本对应可以采用该方法解决

2.

 查看官方文档可以了解给Swiper组件添加点击事件，在点击事件监听中获取swiper最后一个点击的slide。

在点击方法中获取swiper的最后一个点击的slide，返回值是原生dom元素，查看该元素发现有swiper定义的data-swiper-slide-index自定义属性，对应值为slide索引，刚好也可以对应渲染列表索引，通过下标的方式获取列表中对应数据，完成修改。

后续

swiper在实际使用中发现很多遇坑的地方，欢迎有遇到问题的同学互相讨论。