swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动

本文介绍了在uni-app中遇到的Swiper轮播图在息屏或快速滑动时出现疯狂抖动的bug,并提供了详细的解决方案。通过在@animationfinish事件中改变current值而非@change事件,有效避免了抖动现象。同时,文章讨论了自定义指示面板的实现,确保了swiper与指示点的同步。最后,提到了swiper的circular属性在不同状态下的表现及其在小程序和uni-app中的绑定方式差异。
摘要由CSDN通过智能技术生成

gitHub代码下载:https://github.com/Syleapn/uni-app-swiper

以前做小程序项目的时候,没专门测试人员,都是开发者自测,可能我的手机性能比较不错(哈哈)或时机不对,总之没发掘到这个bug;近期做项目,测试了不同的手机,发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机,出现的概率尤其的大。由于本次项目是基于uni-app的,直接就用uni-app进行操作说明;


说明:uni-app编写小程序:采用的是微信小程序的API,Vue的语法,所以,他们很相似,只是在写法上有一点稍微的区别,小程序的那套东西也是适用于uni-app的。

在微信小程序的官方文档中,有这样个提示, 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用
最终产生的后果是如果快速滑动或者息屏一段时间打开后,就出现轮播图的疯狂抖动

一、解决方法是:
在动画播放结束后(@animationfinish)改变current的值,而不是一滑动(@change)就改变current的值。即用@animationfinish代替 @change

二、@change与@animationfinish对比说明
1、相同点:都会改变current的值,current代表当前所在滑块的index
2、不同点:改变current的时机不同,@change滑动时立即改变,@animationfinish动画结束后改变!

三、说明:

如果想要自定义面板指示点,不建议与swiper共用一个索引值,最好将swiper与指示点的索引区分开,即用不同的变量,然后两者同步变化就可以了&#

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值