微信小程序中的 tabBar

一 什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

• 底部 tabBar

• 顶部 tabBar

注意：

• tabBar中 只能配置最少 2 个、最多 5 个 tab 页签

• 当渲染顶部 tabBar 时，不显示 icon，只显示文本

二 tabBar 的 6 个组成部分

• backgroundColor：tabBar 的背景色

• selectedIconPath：选中时的图片路径

• borderStyle：tabBar 上边框的颜色

• iconPath：未选中时的图片路径

• selectedColor：tab 上的文字选中时的颜色

• color：tab 上文字的默认（未选中）颜色

三 tabBar 节点的配置项

四 每个 tab 项的配置选项

五 案例——配置 tabBar 

1 需求描述

在小程序中配置 tabBar。

2 实现步骤

a 拷贝图标资源

b 新建 3 个对应的 tab 页面

c 配置 tabBar 选项

3 拷贝图标资源

a 根目录中建立 images 文件夹，拷贝适当图标到该文件夹中。

b 将需要用到的小图标分为 3 组，每组两个，其中：

• 图片名称中包含 -active 的是选中之后的图标

• 图片名称中不包含 -active 的是默认图标

截图如下。

4 新建 3 个对应的 tab 页面

通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：

{

  "pages": [

    "pages/home/home",

    "pages/message/message",

    "pages/contact/contact"

  ]

}

其中，home 是首页，message 是消息页面，contact 是联系我们页面。

5 配置 tabBar 选项

a 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点

b tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

c 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

• pagePath 指定当前 tab 对应的页面路径【必填】

• text 指定当前 tab 上按钮的文字【必填】

• iconPath 指定当前 tab 未选中时候的图片路径【可选】

• selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

6 完整代码

  "tabBar": {

    "list": [{

      "pagePath": "pages/home/home",

      "text": "首页",

      "iconPath": "/images/tabs/home.png",

      "selectedIconPath": "/images/tabs/home-active.png"

    },{

      "pagePath": "pages/message/message",

      "text": "消息",

      "iconPath": "/images/tabs/message.png",

      "selectedIconPath": "/images/tabs/message-active.png"

    },{

      "pagePath": "pages/contact/contact",

      "text": "联系我们",

      "iconPath": "/images/tabs/contact.png",

      "selectedIconPath": "/images/tabs/contact-active.png"

    }]

  }