uniapp實現tab選項卡

HTML

<view class="end-title">
　　<view @tap="change(0)" :class="{btna:btnnum == 0}">基本信息</view>
  　<view @tap="change(1)" :class="{btna:btnnum == 1}">公告信息</view>
　　<view @tap="change(2)" :class="{btna:btnnum == 2}">換區信息</view>
</view>
<view class="end-cont" :class="{dis:btnnum == 0}">
 　　0信息
</view>
<view class="end-cont" :class="{dis:btnnum == 1}">
 　　1信息
</view>
<view class="end-cont" :class="{dis:btnnum == 2}">
  　2信息
</view>

CSS

    /* 將三個內容view的display設置為none(隱藏) */
    .end-title{
        display: flex;
    }
    .end-title view{
        flex-grow: 1;
        text-align: center;
    }
    .end-cont{
        display: none;
        background: #C8C7CC;
    }
    .btna{
        color: #FFFFFF;
        background: #00A0FF;
    }
    .dis{
        display: block;
    }    

JS

data() {
   return {
      btnnum: 0,
   };
},
methods:{
   change(e) {
      this.btnnum = e
      console.log(this.btnnum)
  }
}

 HTML循環實現tab選項卡

html

<view class="end-title">
     <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
        {{item}}
    </view>
</view>
<view class="end-cont" :class="{dis:btnnum == 0}">
　　0信息
</view>
<view class="end-cont" :class="{dis:btnnum == 1}">
　　1信息
</view>
<view class="end-cont" :class="{dis:btnnum == 2}">
　　2信息
</view>

CSS同上

js

data() {
   return {
      btnnum: 0,
      items:["基本信息","公告信息","換區信息"],
      count:"",
  };
},
methods:{
  change(e) {
     this.count = e
     this.btnnum = e
     console.log(this.count)
  }
}