Vue3+UniApp：在单个页面实现固定 TabBar 的多种方式

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

在 UniApp 开发中，tabBar 通常是通过 pages.json 配置的，适用于整个应用的全局导航

然而，在某些场景下，我们可能需要只在特定的页面展示 tabBar，而不会影响其他页面的布局。这就需要使用自定义 tabBar，可以通过 view 组件、uni-segmented-control 组件或 uni-nav-bar 组件等方式来实现

以下是几种适用场景：

局部页面导航：

例如，一个订单管理页面，用户可以在 "进行中" 和 "已完成" 之间切换，而不影响全局 tabBar
底部固定的二级导航：

例如，在 "记录" 页面，提供 "待审核" 和 "已审核" 选项，方便用户切换，而不会影响其他页面
顶部导航栏的切换：

适用于不适合使用底部 tabBar 的场景，如数据管理页面，用户可以在 "待审核" 和 "已审核" 之间切换

方法	适用场景	说明
方法 1：自定义 view tabBar	仅在某个页面底部	适用于特定页面，不会影响全局 tabBar
方法 2：uni-segmented-control	轻量级页面切换	适用于简单的 Tab 选项，不会影响布局
方法 3：uni-nav-bar	顶部导航切换	适用于带顶部导航的 UI

1. 自定义 view

html 复制代码

<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

html 复制代码

<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 触发 switchTab 进行切换

仅 currentTab === 0 时展示

适用于无需固定底部导航栏的场景，如数据筛选切换

顶部导航，在标题栏左右提供不同的 Tab 切换按钮

html 复制代码

<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 控制当前显示的内容

Vue3+UniApp：在单个页面实现固定 TabBar 的多种方式

目录

前言

1. 自定义 view

2. uni-segmented-control

3. uni-nav-bar