uniapp實現頂部tab選項卡


摘自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)
  }
}
復制代碼

 

樣式展示:

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM