摘自https://www.cnblogs.com/xhxdd/p/11941133.html

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)
  }
}

樣式展示：