博客介绍了在Swiper 4.3.2版本中遇到的自动滚屏错位问题及其解决方案。作者分析了问题产生的原因，包括元素创建和手势操作未暂停导致的错位，并提供了详细的解决思路。通过监听touchStart和touchEnd事件，结合Swiper的autoplay.stop和autoplay.start方法，在触摸开始时暂停，结束时恢复自动滚屏，有效防止了错位。博客还提供了一个Codepen demo和相关参考资料。
起因：
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元/天 解锁文章
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
