【微信小程序】page.json配置-tabBar底部栏

本文链接：https://blog.csdn.net/2401_88677290/article/details/143643425

在微信小程序中，page.json 文件不仅用于配置单个页面的样式和其他属性，还可以用于配置底部导航栏（tabBar）。通过在 page.json 文件中配置 tabBar，可以实现小程序底部导航栏的自定义，包括导航栏的样式、图标和文字等。本文将详细介绍如何在 page.json 文件中配置底部导航栏，并提供一些最佳实践。

1. `tabBar` 基本配置

在 page.json 文件中配置 tabBar 时，需要在文件中添加 tabBar 属性，并指定相应的配置项。以下是详细的配置步骤和示例：

1.1 配置 `tabBar` 基本属性

在 page.json 文件中添加 tabBar 属性，并配置基本属性：

{
   
  "tabBar": {
   
    "color": "#7A7E83",               // 默认字体颜色
    "selectedColor": "#1296db",       // 选中字体颜色
    "borderStyle": "black",           // tabBar 上边框的颜色，仅支持 black / white
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-active.png"
      },
      {
   
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/images/logs.png",
        "selectedIconPath": "/images/logs-active.png"
      }
    ]
  }
}

2. 配置 `tabBar` 详细属性

除了基本属性外，tabBar 还支持更多详细的配置项，包括背景色、位置、自定义样式等。

2.1 背景色和位置

配置 tabBar 的背景色和位置：

{
   
  "tabBar": {
   
    "color": "#7A7E83",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",     // tabBar 背景色
    "position": "bottom",             // tabBar 位置，支持 bottom / top
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text":