1. tab导航栏
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
【文档地址】
2. tab完整配置
"tabBar": {
"color":"#ccc",
"selectedColor":"#0f0",
"backgroundColor":"#fff",
"borderStyle":"white",
"position":"bottom",
"custom":false,
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"/static/icons/a.png",
"selectedIconPath":"/static/icons/a-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"/static/icons/b.png",
"selectedIconPath":"/static/icons/b-active.png"
}
]
},
2.1 color
tab 上的文字默认颜色,仅支持十六进制颜色"color":"#ccc"
2.2 selectedColor
tab 上的文字选中时的颜色,仅支持十六进制颜色 "color":"#ccc"
2.3 backgroundColor
tab 的背景色,仅支持十六进制颜色 "backgroundColor":"#fff"
2.4 borderStyle
tabbar 上边框的颜色, 仅支持 black / white
"borderStyle":"white"
2.5 list
tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"/static/icons/a.png",
"selectedIconPath":"/static/icons/a-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"/static/icons/b.png",
"selectedIconPath":"/static/icons/b-active.png"
}
]
2.5.1 pagePath
页面路径,必须在 pages 中先定义
2.5.2 text
tab 上按钮文字
2.5.3 iconPath
图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
2.5.4 selectedIconPath
选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
2.6 position
tabBar 的位置,仅支持 bottom / top "position":"bottom"
2.7 custom
自定义 tabBar,详情