uniapp实现顶部tab选项卡

最新推荐文章于 2025-08-03 15:33:54 发布

原创最新推荐文章于 2025-08-03 15:33:54 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

uni-app

1 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现一个带有基础、公告和换区信息的选项卡，通过点击切换不同内容区域的显示与隐藏。

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

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同上

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

样式展示：