tabBar节点用于实现多页面的切换。对于一个多tabBar应用，可以通过tabBar节点配置项指定一级导航栏，以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置，不仅是为了方便快速开发导航，更重要的是提示App平台和小程序平台的性能。tabBar节点的常用属性如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| color | HexColor | 用于设置tabBar上的文字默认颜色，必填 | |
| selectedColor | HexColor | 用于设置tabBar上的文字被选中时的颜色，必填 | |
| backgroundColor | HexColor | 用于设置tabBar的背景颜色 | |
| borderStyle | String | black | 用于设置tabBar上边框的颜色，可选值有black/white |
| list | Array | 用于设置tabBar的列表，最少有2个，最多有5个 |
list接收一个数组，数组中每一项都是一个对象。list数组中对象的属性如下：
| 属性 | 类型 | 描述 |
|---|---|---|
| gagePath | String | 用于设置页面路径，必须在pages节点中先定义，必填 |
| text | String | 用于设置tabBar上的按钮文字，在App和H5平台非必填 |
| iconPath | String | 用于设置图片路径，icon大小限制为40KB，建议尺寸为81px×81px，当position为top时，此属性无效，不支持网络图片和字体图标 |
| selectedlconPath | String | 选中图片的路径，图片要求与iconPath的一致 |
实现一个有两个页面的tabBar页面的应用。
在本例中，沿用前面的uniappch02项目，新建两个tabBar页面，分别为基础组件页和flex布局页。在内置浏览器上显示的效果如下：
实现步骤
（1）准备tabBar上的图标。打开iconfont官网，在搜索框中输入”组件“。
下载具有两种颜色（亮色，暗色）的、尺寸为64px×64px的png格式的同一种透明图片。再下载一组”flex“图标，然后将下载的图标复制到static。
（2）新建页面。在pages节点上点击，在弹出的列表中选择【新建页面】，打开【新建uni-app页面】窗口，输入文件名，单击【创建】按钮。
新建compony.vue、flex.vue文件。
打开compony.vue、flex.vue文件，分别在<view></view>之间输入内容：基础组件演示、弹性盒子布局flex。如以下：
<template>
<view>
基础组件演示
</view>
</template>
<template>
<view>
弹性盒子布局flex
</view>
</template>（3）修改pages.json文件。打开pages.json文件，可以看到在pages节点多了两个页面。将compony页面移到第一项，并修改navigationBarTitleText属性，然后新增tabBar节点。
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/compony/compony",
"style" :
{
"navigationBarTitleText": "基础组件",
"enablePullDownRefresh": false
}
}
,{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/flex/flex",
"style" :
{
"navigationBarTitleText": "flex布局",
"enablePullDownRefresh": false
}
}
],
"tabBar":{
"backgroundColor": "#F8F8F8",
"color": "#8F8F94",
"list": [
{
"text": "组件",
"pagePath": "pages/compony/compony",
"iconPath": "static/开发组件.png",
"selectedIconPath": "static/开发组件 (1).png"
},
{
"text": "flex布局",
"pagePath": "pages/flex/flex",
"iconPath": "static/Flex布局.png",
"selectedIconPath": "static/Flex布局 (1).png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
