vue-awesome-swiper 中loop模式下,slide的点击事件问题

问题描述

在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在实际使用中发现很多遇坑的地方,欢迎有遇到问题的同学互相讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值