小程序，全局配置-TabBar（二）

全局配置-TabBar

什么是TabBar？

TabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为底部TabBar和顶部TabBar。注意：TabBar中只能配置最少2个、最多5个tab页签。当渲染顶部TabBar时，不显示icon，只显示文本。

TabBar的6个组成部分

1. backgroundColor: TabBar的背景色
2. selectedIconPath:选中时的图片路径
3. borderStyle: TabBar上边框的颜色
4. iconPath:未选中时的图片路径
5. selectedColor: tab上的文字选中时的颜色
6. color: tab上文字的默认（未选中）颜色

TabBar节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	TabBar的位置，仅支持bottom/top
borderStyle	String	否	black	TabBar上边框的颜色，仅支持black/white
color	HexColor	否	#7A7E83	Tab上文字的默认（未选中）颜色
selectedColor	HexColor	否	#3cc51f	Tab上的文字选中时的颜色
backgroundColor	HexColor	否	#fff	TabBar的背景色
list	Array	是	-	Tab页签的列表，最少2个、最多5个tab

每个Tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	Tab上显示的文字
iconPath	String	否	未选中时的图标路径；当position为top时，不显示icon
selectedIconPath	String	否	选中时的图标路径；当position为top时，不显示icon

案例：配置TabBar

需求描述

根据资料中提供的小图标，在小程序中配置如图所示的TabBar效果：
首页 消息 联系我们

实现步骤

1. 拷贝图标资源
   将资料目录中的images文件夹，拷贝到小程序项目根目录中。将需要用到的小图标分为3组，每组两个，其中：图片名称中包含-active的是选中之后的图标，图片名称中不包含-active的是默认图标。

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

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ]
}

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

3. 配置TabBar选项
   打开app.json配置文件，和pages、window平级，新增TabBar节点。TabBar节点中，新增list数组，这个数组中存放的是每个Tab项的配置对象。在list数组中，新增每一个Tab项的配置对象。对象中包含的属性有：pagePath指定当前Tab对应的页面路径，text指定当前Tab上按钮的文字，iconPath指定当前Tab未选中时的图片路径，selectedIconPath指定当前Tab被选中后高亮的图片路径。
   示例代码：

"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"
    }
  ]
}