- 当前 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 });
},
})
//判断来源,防止循环切换tab
if
(e.detail.source !=
"touch"
){
return
}
大神牛逼,果然有用
哈哈,不是大神,正好前几天被这个问题坑过
请问楼主是怎么解决这个问题的,setData部分放到哪里,谢谢