【uniapp小程序】配置tabbar底部导航栏_uniapp底部导航栏

在uni-app中配置底部导航栏，你需要在 pages.json 文件中设置 tabBar 对象。以下是一个简单的示例：

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp Demo",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/img/home.png",
        "selectedIconPath": "static/img/home-selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/img/mine.png",
        "selectedIconPath": "static/img/mine-selected.png",
        "text": "我的"
      }
    ]
  }
}

在这个配置中：

• color 是未选中的图标和文本的颜色。
• selectedColor 是选中的图标和文本的颜色。
• borderStyle 是底部边框的颜色。
• backgroundColor 是底部导航栏的背景颜色。
• list 数组中定义了每个tab的属性，包括页面路径、图标路径（非选中状态）、图标路径（选中状态）和标签文本。

确保你的项目结构中有对应的文件夹和文件，并且图标的路径是正确的。这样你就可以在uni-app项目中使用底部导航栏了。