swiper定制tab切换频繁出现鬼畜现象
- 当前 Bug 的表现(可附上截图) [图片] - 预期表现 正常速度切换“首页”,“通讯录”,“发现”,“我的”四个tab键切换至对应内容是没有问题的; - 复现路径 当速度足够快的点击某两个tab键(比如首页和通讯录,可以用两个手指来回快速点击首页和通讯录),页面就开始闪烁抖动,基本100%复现; - 提供一个最简复现 Demo WXML: <view class="flex-row" style="display: flex;"> <view class="{{currentTab==0 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap0">首页</view> <view class="{{currentTab==1 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap1">通讯录</view> <view class="{{currentTab==2 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap2">发现</view> <view class="{{currentTab==3 ? 'flex-view-item1' : 'flex-view-item'}}" bindtap="tap3">我的</view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 我是哈哈 --> <swiper-item> <view>我是《首页》</view> </swiper-item> <!-- 我是呵呵 --> <swiper-item> <view>我是《通讯录》</view> </swiper-item> <!-- 我是嘿嘿 --> <swiper-item> <view>我是《发现》</view> </swiper-item> <!-- 我是哼哼--> <swiper-item> <view>我是《我的》</view> </swiper-item> </swiper> WXSS: /*按钮所在容器的属性设置*/ .flex-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } /*按钮默认状态下属性*/ .flex-view-item { width: 20%; height: 50px; background-color: #ffa589; text-align: center; } /*按钮选中状态下属性*/ .flex-view-item1 { width: 20%; height: 50px; background-color: #ff5400; text-align: center; } JS: Page({ data:{ currentTab : 0 //初始化currentTab=0 }, //第1个按钮点击事件,修改currentTab值 tap0:function(event){ this.setData({ currentTab: 0 }); }, // 第2个按钮点击事件,修改currentTab值 tap1:function(event){ this.setData({ currentTab: 1 }); }, // 第3个按钮点击事件,修改currentTab值 tap2:function(event){ this.setData({ currentTab: 2 }); }, // 第4个按钮点击事件,修改currentTab值 tap3:function(event){ this.setData({ currentTab: 3 }); }, // swiper滑动事件,修改currentTab值,实现切换tab bindChange: function( e ) { var that = this; that.setData( { currentTab: e.detail.current }); }, })