![c0fbb2f9ab8123db21cba9cd3f87749f.png](https://i-blog.csdnimg.cn/blog_migrate/93c9429d2c5b3573e907db960b635cad.png)
如果应用是一个多 tab 应用,则可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
![47ae3e00ddf5b398ea3be6596e7bb3b1.png](https://i-blog.csdnimg.cn/blog_migrate/3c3637aa1087c60c3cfc4925a4b78fd7.png)
![c0fbb2f9ab8123db21cba9cd3f87749f.png](https://i-blog.csdnimg.cn/blog_migrate/93c9429d2c5b3573e907db960b635cad.png)
![c0fbb2f9ab8123db21cba9cd3f87749f.png](https://i-blog.csdnimg.cn/blog_migrate/93c9429d2c5b3573e907db960b635cad.png)
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
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 时,此参数无效 |
![c0fbb2f9ab8123db21cba9cd3f87749f.png](https://i-blog.csdnimg.cn/blog_migrate/93c9429d2c5b3573e907db960b635cad.png)
属性 | 类型 | 必填 | 默认值 | 描述 |
width | String | 否 | 80px | 中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度 |
height | String | 否 | 50px | 中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果 |
text | String | 否 | 中间按钮的文字 | |
iconPath | String | 否 | 中间按钮的图片路径 | |
iconWidth | String | 否 | 24px | 图片宽度(高度等比例缩放) |
backgroundImage | String | 否 | 中间按钮的背景图片路径 |
midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap
![c0fbb2f9ab8123db21cba9cd3f87749f.png](https://i-blog.csdnimg.cn/blog_migrate/93c9429d2c5b3573e907db960b635cad.png)
代码示例
"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": "接口" }]}