首先我們看效果

接下來是wxml部分程式碼

<!-- tab框  -->
<view class="nav_title">
  <view class="nav_tab">
  <!-- 如果選中的下表等於當前的索引，就使用active class名，否則class名為common -->
    <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'common'}}" data-index='{{index}}' bindtap="selected"
 
>{{item}}
  <!-- 如果選中的下表等於當前的索引，就新增下劃線 -->   
      <view class="{{selected==index?'nav_underline':''}}"></view>
    </view>
  </view>
  <!-- tab框顯示內容 -->
  <view wx:if="{{selected == 0}}">aaa</view>

  <!-- 待使用 -->
  <view wx:if="{{selected == 1}}
 
">bbb</view>
  <!-- 待取消 -->
  <view wx:if="{{selected == 2}}">ccc</view>
</view>

wxss部分程式碼

/* 頁面背景色 */
page {
  background: rgba(247, 247, 247, 1);
}

.nav_tab {
  width: 702rpx;
  margin: 20rpx auto;
  height: 100rpx;
  display: flex;
  background: #fff;
  border-radius: 10
 
rpx;
  flex-direction: row;
}
/* 未選中的樣式 */
.common {
  line-height: 100rpx;
  text-align: center;
  flex: 1;
  color: #333;
  font-size: 28rpx;
  opacity: 0.5;
}
/* 選中時的樣式 */
.active {
  line-height: 100rpx;
  text-align: center;
  color: #ef9ba8;
  flex: 1;
  font-size: 28rpx;
}
/* 下劃線的樣式 */
.nav_underline {
  background: #ef9ba8;
  width: 54rpx;
  height: 6rpx;
  margin-top: -10rpx;
  margin-left: 70rpx;
  border-radius: 8rpx;
}

最後是js部分

// pages/mine/reserve/reserve.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    selected: 0,
    list: ['全部', '待使用', '待取消'],
  },
  //tab框
  selected: function (e) {
    let that = this
    console.log(e)
    let index = e.currentTarget.dataset.index
    console.log("index",index)
    if (index == 0) {
      that.setData({
        selected: 0
      })
    } else if (index == 1) {
      that.setData({
        selected: 1
      })
    } else {
      that.setData({
        selected: 2
      })
    } 
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})