1.編寫布局文件

 <view class="tab-box">
      <text bindtap='changTab' class="{{currentTab==0 ? 'active' : ''}}" data-current='0'>日常任務(wù)</text>
      <text bindtap='changTab' class="{{currentTab==1 ? 'active' : ''}}" data-current='1'>游戲任務(wù)</text>
      <text bindtap='changTab' class="{{currentTab==2 ? 'active' : ''}}" data-current='2'>紅包任務(wù)</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文本的高度應(yīng)該為74rpx

3.js文件

  data: {
    currentTab: 0      //給一個默認(rèn)值，默認(rèn)第一個選中
  }


  /**
   * tab點擊切換
   */

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

最終效果圖：

yhx.gif

樣式寫法有很多種，有的是等分屏幕，我這里由于項目需求不是等分屏幕，直接給的maring-left ,然后水平居中即可，美滋滋