【Swiper】4.3.2 自动滚屏错位问题解决（含demo）

最新推荐文章于 2023-01-07 14:17:50 发布

Candy_home

最新推荐文章于 2023-01-07 14:17:50 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：外部控件引用文章标签： swiper swiper autoplay swiper 错位 swiper自动滚屏 swiper 滚屏

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Candy_home/article/details/80766407

博客介绍了在Swiper 4.3.2版本中遇到的自动滚屏错位问题及其解决方案。作者分析了问题产生的原因，包括元素创建和手势操作未暂停导致的错位，并提供了详细的解决思路。通过监听touchStart和touchEnd事件，结合Swiper的autoplay.stop和autoplay.start方法，在触摸开始时暂停，结束时恢复自动滚屏，有效防止了错位。博客还提供了一个Codepen demo和相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因：

Swiper由于设置了autoplay，会自己滚动，怎么解决呐，我先升级到了4.3.2发现，默认调用没有解决这个问题，查看了Swiper API 发现了个解决方式，分享给大家。

PS: 查看了3.X.X 的API 感觉没办法解决，建议升级到4.X.X版本 , 不能完全兼容，但是改动成本不大

解题思路：

1.分析原因

滚动错位原因我分析有两个

A. 前后创建了两首尾个元素, 导致获取的不是真正的元素，下图是 4个页面 + 两个红框的首尾

B.手势操作时，没有暂停当前滚动中的循环，导致滚动和切换同步操作最后错位

2.尝试解决方法

问题A 由于实现机制问题，解决起来不方便，所以主要解决问题B

问题B 解决思路（划重点）：

A. 监听滚动事件，查找是否有相关封装的API

解决：API 中找到

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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