uniapp 底部导航栏如何实现

在uniapp中如何实现底部导航栏功能？我想在应用中添加一个固定的底部导航栏，包含多个tab页切换，但不知道具体该怎么配置。官方文档看不太明白，能否提供一个完整的示例代码，包括页面结构和相关配置？另外，如何实现导航栏图标和文字的自定义样式？

2 回复

使用 uni-app 的 tabBar 配置，在 pages.json 中添加：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/user.png",
        "selectedIconPath": "static/user-active.png"
      }
    ]
  }
}

注意：pagePath 需在 pages 数组中注册，图标路径正确即可。


在 UniApp 中，可以通过配置 pages.json 文件来实现底部导航栏（TabBar）。以下是具体步骤：

  1. 在 pages.json 中添加 tabBar 配置：

    • 设置 color（未选中颜色）、selectedColor（选中颜色）、backgroundColor（背景色）和 borderStyle（边框样式）。
    • 在 list 数组中定义每个 tab 项，包括页面路径、图标和文字。

  2. 示例代码：

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/profile/profile",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "iconPath": "static/tab-profile.png",
        "selectedIconPath": "static/tab-profile-active.png",
        "text": "我的"
      }
    ]
  }
}

  3. 注意事项：

    • list 至少需要 2 个、最多 5 个 tab 项。
    • pagePath 必须在 pages 数组中已注册，且放在首位。
    • 图标推荐尺寸为 81px × 81px。

保存后重新运行项目即可看到底部导航栏。

回到顶部