基于Vue3+UniApp在單個頁面實現固定TabBar的多種方式

更新時間：2025年03月21日 08:32:01 作者：碼農研究僧

tabBar 是移動端應用常見的頁面效果,用于實現多頁面的快速切換,本文給大家介紹了如何基于Vue3+UniApp在單個頁面實現固定TabBar的多種方式,需要的朋友可以參考下

局部頁面導航：
例如，一個訂單管理頁面，用戶可以在 “進行中” 和 “已完成” 之間切換，而不影響全局 tabBar
底部固定的二級導航：
例如，在 “記錄” 頁面，提供 “待審核” 和 “已審核” 選項，方便用戶切換，而不會影響其他頁面
頂部導航欄的切換：
適用于不適合使用底部 tabBar 的場景，如數據管理頁面，用戶可以在 “待審核” 和 “已審核” 之間切換

方法	適用場景	說明
方法 1：自定義 view tabBar	僅在某個頁面底部	適用于特定頁面，不會影響全局 tabBar
方法 2：uni-segmented-control	輕量級頁面切換	適用于簡單的 Tab 選項，不會影響布局
方法 3：uni-nav-bar	頂部導航切換	適用于帶頂部導航的 UI

1. 自定義 view

<template>
  <view class="container">


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

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

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

.content {
  flex: 1;
  overflow-y: auto; /* 讓內容可以滾動 */
  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 變量控制當前選中的 tab，并根據 active 類名高亮
padding-bottom: 60px; 避免頁面內容被 tabBar 遮擋

2. uni-segmented-control

以輕量級方式切換不同的頁面內容，不需要固定的底部 tabBar

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

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

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

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

截圖如下：

uni-segmented-control 提供頂部 tab，點擊時 @clickItem 觸發(fā) switchTab 進行切換

僅 currentTab === 0 時展示

適用于無需固定底部導航欄的場景，如數據篩選切換

3. uni-nav-bar

頂部導航，在標題欄左右提供不同的 Tab 切換按鈕

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

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

    <view v-else>
      <uni-card title="測試B">
        <text>這里是測試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 作為導航欄，在左右 slot 里添加點擊切換的按鈕。

switchTab 控制當前顯示的內容