在 uniapp 中隐藏默认 TabBar 并使用自定义 TabBar

前言

uniapp 是一个跨平台的前端框架，基于 Vue.js 的开发理念，能够一次编写，发布到 iOS、Android、H5、小程序等平台。对于移动端应用而言，底部的 TabBar 是一种常见的界面元素，用于页面间的快速切换。在 uniapp 中，我们可以通过 tabBar 配置来控制底部的 TabBar 的显示和样式。然而，默认的 TabBar 设计有时不满足我们的需求，因此很多情况下我们需要自定义 TabBar，来使其更符合设计要求或者实现一些特殊的功能。

在本篇文章中，我们将深入探讨如何在 uniapp 中隐藏默认的 TabBar，并实现自定义 TabBar 的方案。文章将包含多个实际场景和代码示例，帮助开发者更好地理解和实现这一功能。

TabBar 基础知识
- 1.1 默认 TabBar 配置
- 1.2 TabBar 样式与功能
隐藏默认 TabBar
- 2.1 设置 tabBar 为 false
- 2.2 注意事项与平台差异
自定义 TabBar 的实现
- 3.1 自定义 TabBar 结构与样式
- 3.2 动态切换 Tab
- 3.3 使用 Vue 组件构建 TabBar
- 3.4 TabBar 切换逻辑
案例分析
- 4.1 实现一个自定义 TabBar 案例
- 4.2 动态渲染 TabBar 项目
- 4.3 添加动画效果
- 4.4 响应式布局
在不同平台上使用自定义 TabBar
- 5.1 在小程序中实现自定义 TabBar
- 5.2 在 APP 端实现自定义 TabBar
- 5.3 在 H5 端实现自定义 TabBar
总结与最佳实践
- 6.1 性能优化
- 6.2 易于维护的设计方案
- 6.3 与 uniapp 插件的结合使用

1. TabBar 基础知识

1.1 默认 TabBar 配置

在 uniapp 中，TabBar 是一种固定在页面底部的导航组件，通常用于展示应用的主要功能区。例如，我们可以通过配置 tabBar 来指定 TabBar 显示哪些页面、TabBar 的样式等。

在 pages.json 中，tabBar 配置用于控制 TabBar 的显示。最常见的 TabBar 配置项包括 list 和 color 等。

jsonCopy Code
{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3CC51F",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/icon/home.png",
        "selectedIconPath": "static/icon/home_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/icon/cart.png",
        "selectedIconPath": "static/icon/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/icon/user.png",
        "selectedIconPath": "static/icon/user_active.png"
      }
    ]
  }
}

上面的配置示例显示了一个具有三个 Tab 的 TabBar，每个 Tab 有一个图标和文字。通过 color 和 selectedColor 可以设置 Tab 的未选中和选中状态下的颜色。list 数组中的每一项代表一个 Tab，pagePath 用来指定跳转到哪个页面。

1.2 TabBar 样式与功能

TabBar 除了简单的显示文本和图标，还支持自定义颜色、文字、背景颜色以及边框样式。通过合理配置这些属性，可以实现符合设计要求的底部导航。

TabBar 的一个常见特性是 badge，可以为某些 Tab 项添加消息提示。例如，在购物车页面上，当有新商品时，可以通过 badge 来展示购物车的商品数量。

jsonCopy Code
{
  "pagePath": "pages/cart/cart",
  "text": "购物车",
  "iconPath": "static/icon/cart.png",
  "selectedIconPath": "static/icon/cart_active.png",
  "badge": "5"
}

在这个例子中，购物车 Tab 会显示一个数字提示，告诉用户购物车中有 5 件商品。

2. 隐藏默认 TabBar

2.1 设置 `tabBar` 为 `false`

有时候，开发者需要在某些页面隐藏默认的 TabBar。这种需求通常出现在页面需要更多屏幕空间的场景下，或者当用户处于某些特殊的界面时（如登录页、详情页等）。为了隐藏默认的 TabBar，我们可以将 tabBar 配置项设置为 false，如下所示：

jsonCopy Code
{
  "tabBar": false
}

或者，我们可以在页面的 pages.json 中为特定页面配置 tabBar 为 false，使得该页面不显示 TabBar。

jsonCopy Code
{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录",
        "tabBar": false
      }
    }
  ]
}

这样，login 页面将不会显示默认的 TabBar，页面内容将占据整个屏幕。

2.2 注意事项与平台差异

在不同的平台中，隐藏 TabBar 的行为可能会有所不同。在小程序中，tabBar 隐藏后，用户可能需要手动返回到主界面才能看到 TabBar，而在原生 APP 中，TabBar 会直接消失。因此，开发者在设计时需要考虑平台间的差异，特别是在需要自定义 TabBar 的情况下。

3. 自定义 TabBar 的实现

3.1 自定义 TabBar 结构与样式

实现自定义 TabBar 通常需要开发者手动构建一个 TabBar 组件，然后在页面中进行引用。为了提高代码复用性，可以通过 Vue 组件来构建一个动态 TabBar。

首先，我们需要创建一个自定义 TabBar 组件 CustomTabBar.vue，该组件将负责 TabBar 的显示和切换逻辑。

Copy Code
<template>
  <view class="tab-bar">
    <view
      v-for="(tab, index) in tabs"
      :key="tab.pagePath"
      class="tab-item"
      :class="{ 'active': index === activeIndex }"
      @click="onTabClick(index)"
    >
      <image :src="index === activeIndex ? tab.selectedIconPath : tab.iconPath" class="icon" />
      <text>{{ tab.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: [
        {
          pagePath: "/pages/home/home",
          text: "首页",
          iconPath: "static/icon/home.png",
          selectedIconPath: "static/icon/home_active.png"
        },
        {
          pagePath: "/pages/cart/cart",
          text: "购物车",
          iconPath: "static/icon/cart.png",
          selectedIconPath: "static/icon/cart_active.png"
        },
        {
          pagePath: "/pages/user/user",
          text: "我的",
          iconPath: "static/icon/user.png",
          selectedIconPath: "static/icon/user_active.png"
        }
      ]
    };
  },
  methods: {
    onTabClick(index) {
      this.activeIndex = index;
      uni.switchTab({
        url: this.tabs[index].pagePath
      });
    }
  }
};
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-top: 1px solid #e1e1e1;
  height: 50px;
  align-items: center;
}

.tab-item {
  text-align: center;
  flex: 1;
}

.tab-item.active {
  color: #3cc51f;
}

.icon {
  width: 20px;
  height: 20px;
}
</style>

在上面的代码中，我们创建了一个自定义 TabBar，包含三个 Tab 项。每个 Tab 都有 text、iconPath 和 selectedIconPath 等属性，用户点击 Tab 时会切换到对应的页面。

3.2 动态切换 Tab

为了实现 Tab 切换，我们通过 uni.switchTab API 来切换到指定的页面。activeIndex 用来记录当前选中的 Tab 索引，并在点击时更新。样式上，选中的 Tab 会应用 `