中国建筑网官网监理工程师网站地方门户网站源码
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": {}
}