微信小程序自定义tabs页

u1s1 WeUI的tabs有点难用，不如自己自定义一个，样式还可以自己调整
1、wxml文件

<view id='tabs'>
      <view class='tabs-box'>
        <block wx:for="{{tabList}}" wx:key="index">
          <view class="tabs-item {{currentTabIndex == index ? 'selected' : '' }}" bindtap='onTabsItemTap'
            data-index='{{index}}'>
            {{item}}
          </view>
        </block>
      </view>
 
      <scroll-view class='ordert-detail' scroll-y="true">
        <view hidden='{{currentTabIndex != 0}}'>
        页面1
        </view>

        <view hidden='{{currentTabIndex != 1}}'>
        页面2
        </view>
      </scroll-view>
    </view>

2、js文件

data: {
    currentTabIndex: 0,
    tabList:['页面1'，'页面2']
  },
  onTabsItemTap: function (event) {
    let index = event.currentTarget.dataset.index;
    this.setData({
      currentTabIndex: index
    })
  },

3、wxss文件

#tabs {
  font-size: 28rpx;
}

.tabs-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #27C997;
}

.tabs-item.selected {
  color: #FFFFFF;
  border-bottom: 12rpx solid #FFFFFF;
}

.tabs-item {
  width: 33.3%;
  color: #C7F0E4;
  border-bottom: 12rpx solid #27C997;
}