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

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与指示点的索引区分开,即用不同的变量,然后两者同步变化就可以了!

下面直接来展示一个

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值