uni-app（4）— 配置tabbar
本文共 2826 字，大约阅读时间需要 9 分钟。
此文为uni-app总结笔记（4）— 配置tabbar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
Tips
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
常用属性说明：
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色 | ||
| borderStyle | String | 否 | black | tabbar 上边框的颜色，仅支持 black/white | App 2.3.4+ 支持其他颜色值 |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | ||
| position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |
其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
| iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效 |
示例代码：
"tabBar": { "list": [ { "text": "首页", "pagePath":"pages/index/index", "iconPath":"static/tabs/home.png", "selectedIconPath":"static/tabs/home-active.png" }, { "text": "信息", "pagePath":"pages/message/message", "iconPath":"static/tabs/message.png", "selectedIconPath":"static/tabs/message-active.png" }, { "text": "我们", "pagePath":"pages/contact/contact", "iconPath":"static/tabs/contact.png", "selectedIconPath":"static/tabs/contact-active.png" } ] } 注意：
通过官网可知，pages 和 tabbar 同级。
为tabBar单独设置样式： - “color”: 颜色
- “selectedColor”: 选中颜色
- “backgroundColor”: 背景颜色
- “borderStyle”: 上边框颜色（ 仅支持 black 和 white ）
- “position”: tabbar位置（可选值 bottom、top ，top 值仅微信小程序支持 )
效果展示
首页状态：
信息页状态 
联系我们页面： 
icon展示： 
完整的page.json文件代码：
{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/message/message", "style": { "navigationBarTitleText":"信息页", "navigationBarBackgroundColor":"#FF6666", "h5": { "pullToRefresh": { "color":"#007AFF" } } } }, { "path": "pages/index/index" }, { "path":"pages/contact/contact" } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "你好呀", "navigationBarBackgroundColor": "#66CCCC", "enablePullDownRefresh": true, "backgroundColor": "#CCFFFF" }, "tabBar": { "color":"#4CD964", "selectedColor":"#DD524D", "backgroundColor":"#FFFFFF", "borderStyle":"black", "position":"bottom", "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconPath":"static/tabs/home.png", "selectedIconPath":"static/tabs/home-active.png" }, { "text":"信息", "pagePath":"pages/message/message", "iconPath":"static/tabs/message.png", "selectedIconPath":"static/tabs/message-active.png" }, { "text":"我们", "pagePath":"pages/contact/contact", "iconPath":"static/tabs/contact.png", "selectedIconPath":"static/tabs/contact-active.png" } ] }} 转载地址：http://wypcz.baihongyu.com/
你可能感兴趣的文章
Mysql学习总结（61）——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结（64）——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结（65）——项目实战中常用SQL实践总结
查看>>
Mysql学习总结（66）——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结（68）——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结（69）——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结（6）——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结（70）——MySQL 优化实施方案
查看>>
Mysql学习总结（71）——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结（73）——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>
Mysql学习总结（77）——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结（78）——MySQL各版本差异整理
查看>>
Mysql学习总结（79）——MySQL常用函数总结
查看>>
Mysql学习总结（7）——MySql索引原理与使用大全
查看>>
Mysql学习总结（80）——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结（81）——为什么MySQL不推荐使用uuid或者雪花id作为主键？
查看>>
Mysql学习总结（82）——MySQL逻辑删除与数据库唯一性约束如何解决？
查看>>
Mysql学习总结（83）——常用的几种分布式锁：ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结（84）—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结（85）——开发人员最应该明白的数据库设计原则
查看>>