微信小程序自定义tab选项卡切换

1.编写布局文件

 <view class="tab-box">
      <text bindtap='changTab' class="{{currentTab==0 ? 'active' : ''}}" data-current='0'>日常任务</text>
      <text bindtap='changTab' class="{{currentTab==1 ? 'active' : ''}}" data-current='1'>游戏任务</text>
      <text bindtap='changTab' class="{{currentTab==2 ? 'active' : ''}}" data-current='2'>红包任务</text>
    </view>

2.编写样式

.tab-box {
  width: 100%;
  height: 80rpx;
  display: flex;
  background: white;
  justify-content: center;
  overflow: hidden;
}

.tab-box text {
  margin-left: 60rpx;
  font-size: 30rpx;
  height: 74rpx;
  line-height: 72rpx;
}

.active {
  border-bottom: 6rpx solid #ffa810;
  border-radius: 4rpx;
}

注意border-bottom: 6rpx给的是6rpx ,tab-box的高度为80rpx ,所以text文本的高度应该为74rpx

3.js文件

  data: {
    currentTab: 0      //给一个默认值，默认第一个选中
  }


  /**
   * tab点击切换
   */

  changTab: function(event) {
    this.setData({
      currentTab: event.target.dataset.current
    })
  }

最终效果图：

yhx.gif

样式写法有很多种，有的是等分屏幕，我这里由于项目需求不是等分屏幕，直接给的maring-left ,然后水平居中即可，美滋滋