基于Vue3+UniApp在單個(gè)頁面實(shí)現(xiàn)固定TabBar的多種方式

更新時(shí)間：2025年03月21日 08:32:01 作者：碼農(nóng)研究僧

tabBar 是移動(dòng)端應(yīng)用常見的頁面效果,用于實(shí)現(xiàn)多頁面的快速切換,本文給大家介紹了如何基于Vue3+UniApp在單個(gè)頁面實(shí)現(xiàn)固定TabBar的多種方式,需要的朋友可以參考下

局部頁面導(dǎo)航：
例如，一個(gè)訂單管理頁面，用戶可以在 “進(jìn)行中” 和 “已完成” 之間切換，而不影響全局 tabBar
底部固定的二級(jí)導(dǎo)航：
例如，在 “記錄” 頁面，提供 “待審核” 和 “已審核” 選項(xiàng)，方便用戶切換，而不會(huì)影響其他頁面
頂部導(dǎo)航欄的切換：
適用于不適合使用底部 tabBar 的場(chǎng)景，如數(shù)據(jù)管理頁面，用戶可以在 “待審核” 和 “已審核” 之間切換

方法	適用場(chǎng)景	說明
方法 1：自定義 view tabBar	僅在某個(gè)頁面底部	適用于特定頁面，不會(huì)影響全局 tabBar
方法 2：uni-segmented-control	輕量級(jí)頁面切換	適用于簡(jiǎn)單的 Tab 選項(xiàng)，不會(huì)影響布局
方法 3：uni-nav-bar	頂部導(dǎo)航切換	適用于帶頂部導(dǎo)航的 UI

1. 自定義 view

<template>
  <view class="container">


    <!-- 固定底部的 tabBar -->
    <view class="fixed-tabbar">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
        <text>測(cè)試A</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
        <text>測(cè)試B</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 當(dāng)前選中的 tab
    };
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto; /* 讓內(nèi)容可以滾動(dòng) */
  padding-bottom: 60px; /* 避免被底部 tabBar 遮擋 */
}

.fixed-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
}
</style>

截圖如下：

fixed-tabbar 采用 position: fixed; bottom: 0;，始終固定在頁面底部
使用 currentTab 變量控制當(dāng)前選中的 tab，并根據(jù) active 類名高亮
padding-bottom: 60px; 避免頁面內(nèi)容被 tabBar 遮擋

2. uni-segmented-control

以輕量級(jí)方式切換不同的頁面內(nèi)容，不需要固定的底部 tabBar

<template>
  <view>
    <!-- 頂部 Tab 切換 -->
    <uni-segmented-control
      :current="currentTab"
      :values="['測(cè)試A', '測(cè)試B']"
      @clickItem="switchTab"
    />

    <!-- 提柜記錄 -->
    <view v-if="currentTab === 0">
      <uni-card title="測(cè)試A">
        <text>這里是測(cè)試A...</text>
      </uni-card>
    </view>

    <!-- 殘損單記錄 -->
    <view v-else>
      <uni-card title="測(cè)試B">
        <text>這里是測(cè)試B...</text>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0 // 默認(rèn)選中第一個(gè)
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

截圖如下：

uni-segmented-control 提供頂部 tab，點(diǎn)擊時(shí) @clickItem 觸發(fā) switchTab 進(jìn)行切換

僅 currentTab === 0 時(shí)展示

適用于無需固定底部導(dǎo)航欄的場(chǎng)景，如數(shù)據(jù)篩選切換

3. uni-nav-bar

頂部導(dǎo)航，在標(biāo)題欄左右提供不同的 Tab 切換按鈕

<template>
  <view>
    <!-- 自定義頂部 Tab -->
    <uni-nav-bar >
      <template v-slot:left>
        <view @click="switchTab(0)" :class="{ active: currentTab === 0 }">測(cè)試A</view>
      </template>
      <template v-slot:right>
        <view @click="switchTab(1)" :class="{ active: currentTab === 1 }">測(cè)試B</view>
      </template>
    </uni-nav-bar>

    <!-- 頁面內(nèi)容 -->
    <view v-if="currentTab === 0">
      <uni-card title="測(cè)試A">
        <text>這里是測(cè)試A...</text>
      </uni-card>
    </view>

    <view v-else>
      <uni-card title="測(cè)試B">
        <text>這里是測(cè)試B...</text>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style scoped>
.active {
  font-weight: bold;
  color: #007AFF;
}
</style>

uni-nav-bar 作為導(dǎo)航欄，在左右 slot 里添加點(diǎn)擊切換的按鈕。

switchTab 控制當(dāng)前顯示的內(nèi)容