微信小程序横向tab栏切换

<view class="institutionalView">
  <view class="tab">
    <view class="{{item.isActive?'isActive':''}}" wx:for="{{ tabs }}" wx:key="id" data-index="{{index}}" bind:tap="changeTab">{{ item.name }}</view>
  </view>
  <block wx:if="{{tabs[0].isActive}}">这个是未开始</block>
  <block wx:elif="{{tabs[1].isActive}}">这个是未开始</block>
  <block wx:elif="{{tabs[2].isActive}}">这个是待审批</block>
</view>

page {
  height: 100%;
  background-color: #f3f3f3;
}

.tab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}

.isActive {
  color: #07c160;
}

data: {
    // tab 栏数据
    tabs:[
      {
        id:0,
        name:'已开始',
        isActive:true,
      },
      {
        id: 1,
        name: '未开始',
        isActive: false,
      },
      {
        id: 2,
        name: '待审批',
        isActive: false,
      },
    ]
  },

  // 切换 tab栏 选项
  changeTab(e){
    console.log(e)
    let index = e.currentTarget.dataset.index;
    let {tabs} = this.data;
    tabs.forEach((item)=>{
      item.id===index ? item.isActive=true : item.isActive=false;
    });
    this.setData({
      tabs
    });
  },