微信小程序实现tab点击切换

<!--pages/dingdan/dingdan.wxml-->
<view class="body">
  <view class="swiper-tab">
    <view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
      <hr class="{{page==index?'selected-line':'unselect-line'}}" />
    </view>
  </view>

  <view class="view-Content">
    <view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
      <view class="content">
        <text>暂无订单{{index}}</text>
      </view>
    </view>
  </view>

</view>

page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}

.body {
  height: 100%;
  
  display: flex;
  flex-direction: column;
}


.swiper-tab {
  width: 100%;
  height: 80rpx;
  text-align: center;
  display: flex;
  justify-content: space-between;
  background: white;
}

.selected-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff5050;
  background: #fff;
  font-size: 32rpx;
  font-weight: bold;
  font-family: PingFang SC;
  font-weight: 400;
  width: 33%;
  height: 60rpx;
  line-height: 60rpx;
  opacity: 1;
  
  position: relative;
}

.unselect-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4f4f50;
  width: 33%;
  height: 60rpx;
  line-height: 60rpx;
  background: #fff;
  opacity: 1;
  position: relative;
  
}

.selected-line {
  background: #ff5050;
  height: 4rpx;
  width: 90rpx;
  position: absolute;
  
  bottom: -18rpx;
  width: 60rpx;
}


.view-Content {
  flex: 1;
  overflow-y: auto;
  background-color: rgb(236, 236, 236);
}

.tabCon {
  height: 100%;
}



.show {
  display: block;
}

.hidden {
  display: none;
}

Page({

  
  data: {
    page: 0, // page：当前页--
    tabList: [{
      title: '菜单1',
      num: 0
    }, {
      title: '菜单2',
      num: 0
    }, {
      title: '菜单3',
      num: 0
    }],
  },


  // 切换tab
  change: function (event) {
    console.log('切换时会调用', event);
    var a = event.currentTarget.dataset.pageid
    this.setData({
      page: a,
    })
  },
  

  
  onLoad: function (options) {

  },

  
  onReady: function () {

  },

  
  onShow: function () {

  },

  
  onHide: function () {

  },

  
  onUnload: function () {

  },

  
  onPullDownRefresh: function () {

  },

  
  onReachBottom: function () {

  },

  
  onShareAppMessage: function () {

  },

})