微信小程序开发教程-底部导航栏设置

在微信小程序中，tabBar 是一个非常重要的属性，它允许开发者为用户提供一个底部的导航栏，使得用户可以在不同的页面之间快速切换。tabBar 属性在小程序的 app.json 配置文件中进行设置。

tabBar 属性结构

下面是 tabBar 属性的主要配置项及其说明：

{
  "tabBar": {
    "color": "#000000", // 未选中的字体颜色
    "selectedColor": "#3cc51f", // 选中的字体颜色
    "backgroundColor": "#ffffff", // tabBar 的背景色
    "borderStyle": "white", // tabBar 的边框颜色，支持 white 和 black
    "list": [
      {
        "pagePath": "pages/index/index", // 页面路径
        "text": "首页", // tabBar 的文字
        "iconPath": "images/icon_home.png", // 未选中的图标
        "selectedIconPath": "images/icon_home_active.png", // 选中的图标
        "badge": "1", // 提示数字，显示在右上角（可选）
        "dot": true // 是否显示小红点（可选）
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/icon_logs.png",
        "selectedIconPath": "images/icon_logs_active.png"
      }
      // 可以添加更多的 tab
    ]
  }
}

主要属性说明

• color：未选中时的字体颜色。
• selectedColor：选中时的字体颜色。
• backgroundColor：tabBar 的背景色。
• borderStyle：tabBar 的边框颜色，支持 white 和 black。
• list：一个数组，包含多个 tab 的配置对象。

每个 tab 的配置项

• pagePath：指定的页面路径，必须是相对路径，指向小程序的页面。
• text：tab 上显示的文字。
• iconPath：未选中的图标路径，建议使用 PNG 格式的 81x81 像素的图标。
• selectedIconPath：选中的图标路径。
• badge：小红点的数字提示，显示在右上角。
• dot：是否显示小红点，值为 true 或 false。

使用示例

以下是一个完整的 app.json 文件示例，包含 tabBar 的设置：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon_home.png",
        "selectedIconPath": "images/icon_home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/icon_logs.png",
        "selectedIconPath": "images/icon_logs_active.png"
      }
    ]
  }
}

注意事项

1. 页面路径：确保 pagePath 使用的是正确的相对路径，并且对应的小程序页面已在 pages 数组中声明。
2. 图标：未选中和选中的图标必须提供，建议使用统一的尺寸和格式，以保持界面一致性。
3. 最大数量：一个 tabBar 最多可以配置 5 个 tab。
4. tabBar 页面：在 tabBar 中定义的页面不能使用 wx.navigateTo 进行跳转，必须使用 wx.switchTab 进行页面切换。

通过设置 tabBar，可以为用户提供更好的导航体验，方便用户在小程序的不同页面之间切换。