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

背景说明
由于公司需求需要,需要按照返回值设置当前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表示 (方法二)

    微信小程序之swiper bindchange 陷入死循环的解决方法_第1张图片
    设置bindchange中e读取e.detail.source==touch(用户滑动触发)时候来改变data中的current值

你可能感兴趣的:(微信小程序)