收藏
回答

swiper定制tab切换频繁出现鬼畜现象

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug swiper 客户端 Version 7.0.3 2.4.1

- 当前 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 });  

},

})


最后一次编辑于  03-09  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 付忠
    付忠
    03-10
    //判断来源,防止循环切换tab
    if(e.detail.source != "touch"){
              return
            }


    03-10
    赞同 1
    回复 3
    • 烟小清
      烟小清
      03-11

      大神牛逼,果然有用

      03-11
      1
      回复
    • 付忠
      付忠
      03-11回复烟小清

      哈哈,不是大神,正好前几天被这个问题坑过

      03-11
      回复
    • 卡卡
      卡卡
      04-25回复烟小清

      请问楼主是怎么解决这个问题的,setData部分放到哪里,谢谢

      04-25
      回复