微信小程序之swiper bindchange 陷入死循环的解决方法

在处理公司需求时,遇到微信小程序swiper因动态设置current值导致的闪烁、抖动问题。通过分析swiper事件,发现bindchange和bindtransition不合适,采用bindanimationfinish事件结合用户滑动判断(e.detail.source == 'touch')来更新current,从而避免了死循环。
摘要由CSDN通过智能技术生成

背景说明
由于公司需求需要,需要按照返回值设置当前swiper 的curren值,造成swiper的闪烁、抖动问题,现在分享出来我的解决方案

  1. 先来查看swiper 的一些事件方法
属性 类型 默认值 必填 说明
bindchange eventhandle current 改变时会触发 change 事件,event.detail = {current, source}
bindtransition eventhandle current swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}
bindanimationfinish eventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上
  1. 根据以上属性分析 解决方法一:

三个事件代表着不同的方式,但是其中bindchange和bindtranstion 都是位置改的时候就会调用,显然不适合现在使用的这种防抖事件的情况,所以可以在bindanimationfinish事件代替bindchange 中来设置data中的current

  1. 另看swiper的文档中tip表示 (方法二)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值