背景说明
由于公司需求需要,需要按照返回值设置当前swiper 的curren值,造成swiper的闪烁、抖动问题,现在分享出来我的解决方案
- 先来查看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 同上 |
- 根据以上属性分析 解决方法一:
三个事件代表着不同的方式,但是其中bindchange和bindtranstion 都是位置改的时候就会调用,显然不适合现在使用的这种防抖事件的情况,所以可以在bindanimationfinish事件代替bindchange 中来设置data中的current
-
另看swiper的文档中tip表示 (方法二)