微信小程序实现tabs

wxml代码：

<view id='tabs'>
  <view class='tabs-box'>
    <block wx:for="{{['待收货','待取货','已完成','已关闭']}}" wx:key="index">
      <view class="tabs-item {{currentTabIndex == index ? 'selected' : '' }}" bindtap='onTabsItemTap' data-index='{{index}}'>
        {{item}}      
      </view>
    </block>
  </view>
  <view class='ordert-detail'>
    <view hidden='{{currentTabIndex != 0}}'>页面1</view>
    <view hidden='{{currentTabIndex != 1}}'>页面2</view>
    <view hidden='{{currentTabIndex != 2}}'>页面3</view>
    <view hidden='{{currentTabIndex != 3}}'>页面4</view>
  </view>
</view>

wxss代码：

#tabs{
  font-size: 28rpx;
}
.tabs-box{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center
}
.tabs-item.selected {
    color:#874b27;
    border-bottom:2rpx solid #874b27;
}
.tabs-item {
    width: 33.3%;
    color:#666;
    border-bottom:1rpx solid #e9e9e9;
}

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTabIndex:0
  },
  onTabsItemTap:function(event){
    let index=event.currentTarget.dataset.index;
    this.setData({
      currentTabIndex:index
    })
  }
})

页面效果：