首页 > 其他 > 详细

记一次使用swiper遇到的问题

时间:2021-04-09 13:28:46      阅读:25      评论:0      收藏:0      [点我收藏+]

需求:

在一个移动端的h5页面中,使用swiper轮播banner活动图

 

问题:

当手动拖动swiper里的图片时,手指松开,图片卡在松开的位置,不会回弹到正常位置

技术分享图片

 

分析:

swiper回弹会触发touchEnd事件

我在swiper的on配置中绑定touchMovetouchEnd事件

发现拖动图片时,touchMove触发了,而touchEnd事件没有触发

当我点击图片时,touchEnd触发了,而且图片回到正常位置了

所以图片回到正常位置应该和touchEnd事件相关

 

原因:

审查代码发现, 页面中有个地方,在window上绑定了touchmove事件

touchmove事件中有绑定了touchend事件

且在touchend事件中通过e.stopPropagation(),阻止touchend事件的冒泡

导致swiper上的touchEnd事件无法触发,进而导致图片无法回到正常位置

 

解决:

为了不影响之前的代码逻辑,在上述window上的touchend事件中

判断touchendtarget,如果target是swiper,则不阻止冒泡

 

记一次使用swiper遇到的问题

原文:https://www.cnblogs.com/ourener/p/14636442.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!