uniapp 自定义底部导航栏

### 创建自定义底部导航栏

在 UniApp 开发环境中，创建自定义底部导航栏涉及多个方面的工作，包括但不限于配置 `pages.json` 文件来设置 tabBar 的样式和链接页面路径[^3]。

#### 配置 pages.json

为了使自定义的底部导航栏生效，在项目的根目录下的 `pages.json` 文件中添加或修改 tabBar 字段。此字段内可以指定颜色、选中状态的颜色、边框风格、背景色以及列表项。对于每一个列表项而言，仅需设定其 `pagePath` 属性指向目标页面，并以斜杠 `/` 开头表示相对路径：

{
  "tabBar": {
    "color": "#333",
    "selectedColor": "#fa2c19",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {"pagePath": "/pages/index/index"},
      {"pagePath": "/pages/category/category"},
      {"pagePath": "/pages/found/found"},
      {"pagePath": "/pages/cart/cart"},
      {"pagePath": "/pages/mine/mine"}
    ]
  }
}

#### 实现 JavaScript 功能逻辑

为了让底部导航栏能够响应用户的交互操作并切换到对应的页面，可以在各个页面加载时通过编程方式通知全局定义好的 tabbar 当前处于哪个选项卡上。例如当用户进入首页时可以通过如下代码片段向 tabbar 发送消息使其高亮显示第一个标签页[^4]:

export default {
  onLoad() {
    this.$nextTick(() => {
      const eventChannel = this.getOpenerEventChannel();
      if (eventChannel) {
        eventChannel.emit('acceptDataFromOpenedPage', { current: 0 });
      }
    })
  },
};

以上就是基于所提供的参考资料所整理出来的有关于如何在 UniApp 中构建自定义底部导航栏的方法概述[^1]。