微信小程序设置tabBar选中颜色和图标

在微信小程序中，你可以通过配置 app.json 文件中的 tabBar 属性来设置底部导航栏的选中颜色和图标。

配置 tabBar 属性

app.json 文件中的 tabBar 属性用于配置底部导航栏。你可以设置选中颜色、未选中颜色、图标等。具体配置如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/about/about"
  ],
  "tabBar": {
    "color": "#888888", // 未选中时的字体颜色
    "selectedColor": "#ff0000", // 选中时的字体颜色
    "borderStyle": "black", // tabBar 上边框的颜色，支持 black、white
    "backgroundColor": "#ffffff", // tabBar 的背景颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/icons/home.png", // 未选中状态下的图标路径
        "selectedIconPath": "assets/icons/home-active.png" // 选中状态下的图标路径
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "assets/icons/logs.png",
        "selectedIconPath": "assets/icons/logs-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "assets/icons/about.png",
        "selectedIconPath": "assets/icons/about-active.png"
      }
    ]
  }
}

配置项解释

color: 未选中时的字体颜色，支持十六进制颜色值、rgb() 或 rgba()。

selectedColor: 选中时的字体颜色。

borderStyle: tabBar 上边框的颜色，支持 black 和 white。

backgroundColor: tabBar 的背景颜色。

list: 配置 tabBar 的每一项，包括：pagePath: 页面路径，相对于 app.json 的路径。

text: tabBar 中的文本。

iconPath: 未选中状态下的图标路径。

selectedIconPath: 选中状态下的图标路径。

图标路径说明

图标路径需要是小程序的本地路径，通常放在 assets 或 images 文件夹下。确保图标文件存在并路径正确。

支持的图标格式包括 PNG、JPG、JPEG、GIF 等。