微信小程序 swiper滑动出现无限滑动bug

时间:2024-04-02 14:53:25

 这是发现的一个关于微信小程序 swiper 组件的bug, 以美团为例截图如下:

微信小程序 swiper滑动出现无限滑动bug

 

要解决这个bug 我们先需要看一下微信小程序的官方文档 关于swiper组件的介绍 https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html?search-key=bindanimationfinish  

可以看到

微信小程序 swiper滑动出现无限滑动bug

在swiper组件中有两个bind事件,想要解决这个bug 我们需要使用bindanimationfinish  这个bind事件来实现tab换页,bindanimationfinish  和 bindchange 的主要区别在于 获取event.detail的值的时间,bindchange是在滑动立即获取,如何我们在事件方法体中写了setData方法,那么恭喜swiper组件会在性能较差的手机出现如图一的bug导致页面不断滑动从而致使小程序崩溃。bindanimationfinish  这个事件,是在你的滑动动画结束后才获取event.detail,这样就很好的规避了上一种情况。

希望能帮助更多的正在入坑小程序的码农。 这也算是一个坑了