如果应用是一个多 tab 应用，则可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
- Tips
(1) 当设置 position 为 top 时，将不会显示 icon
(2) tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
(3) tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
(4) tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
(5) 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
- 属性说明
|
属性 |
类型 |
必填 |
默认值 |
描述 |
平台差异说明 |
|
color |
HexColor |
是 |
tab 上的文字默认颜色 |
||
|
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
||
|
backgroundColor |
HexColor |
是 |
tab 的背景色 |
||
|
borderStyle |
String |
否 |
black |
tabbar 上边框的颜色，可选值 black/white |
App 2.3.4+ 支持其他颜色值 |
|
blurEffect |
String |
否 |
none |
iOS 高斯模糊效果，可选值 dark/extralight/light/none |
App 2.4.0+ 支持 |
|
list |
Array |
是 |
tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
||
|
position |
String |
否 |
bottom |
可选值 bottom、top |
top 值仅微信小程序支持 |
|
fontSize |
String |
否 |
10px |
文字默认大小 |
App 2.3.4+ |
|
iconWidth |
String |
否 |
24px |
图标默认宽度（高度等比例缩放） |
App 2.3.4+ |
|
spacing |
String |
否 |
3px |
图标和文字的间距 |
App 2.3.4+ |
|
height |
String |
否 |
50px |
tabBar 默认高度 |
App 2.3.4+ |
|
midButton |
Object |
否 |
中间按钮 仅在 list 项为偶数时有效 |
App 2.3.4+ |
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
|
属性 |
类型 |
必填 |
说明 |
|
pagePath |
String |
是 |
页面路径，必须在 pages 中先定义 |
|
text |
String |
是 |
tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
|
iconPath |
String |
否 |
图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
|
selectedIconPath |
String |
否 |
选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
- midButton 属性说明
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
width |
String |
否 |
80px |
中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度 |
|
height |
String |
否 |
50px |
中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果 |
|
text |
String |
否 |
中间按钮的文字 |
|
|
iconPath |
String |
否 |
中间按钮的图片路径 |
|
|
iconWidth |
String |
否 |
24px |
图片宽度（高度等比例缩放） |
|
backgroundImage |
String |
否 |
中间按钮的背景图片路径 |
midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap。
- tabbar常见问题
(1)tabbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。开发人员也可以自行设定高度，调回56px。
(2)tabbar 的 js api，可有实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等的功能。hello uni-app模板中也有具体的示例，可以参考。
(3)tabbar 的 item 点击事件见页面生命周期的onTabItemTap。
(4)代码跳转到tabbar页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type="switchTab"
(5)tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量--window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(--window-bottom) + 10px)
(6)中间带+号的tabbar模板例子，可以参考uniapp插件市场的示例(底部带加号tabbar选项卡项目模板)。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
(7)原生的tabbar有且只有一个且在首页。二级页如需的tab，前端自行实现。
(8)若App端自定义tabbar，建议使用nvue并做成单页方式，即所有tabbar的页面内容其实写在一个nvue页面里，这样的性能体验更好。
(9)微信通过webview自定义tabbar，在uni-app也支持，但仅支持微信。因该功能体验不佳，app上没有实现这个方式，而是推荐使用app提供的自定义tabbar方式，不管是原生tabbar额外的自定义配置还是nvue的单页自定义tabbar。
(10) 如果是需要先登录、后进入tab页面，不需要把登陆页设为首页，首页仍然是tabbar页，可参考HBuilderX新建uni-app项目时的登陆模板
(11) 前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可以参考插件市场提供的示例：底部原生图标分享菜单
(12) 微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。
- 代码示例
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath":"static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}