原生 tabbar:
如果小程序是一个多 tab 应用,可以通过 app.json
中的 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。
多 tab 应用:客户端窗口的底部或顶部有 tab 栏可以切换页面。
// app.json
{
"tabBar": {
"list": [ // tab 的列表,最少 2 个、最多 5 个 tab
{
"pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义
"text": "首页", // tab 上按钮文字
"iconPath": "../../images/index.png", // 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
"selectedIconPath": "../../images/index-selected.png", // 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "../../images/log.png",
"selectedIconPath": "../../images/log-selected.png",
},
],
"color": "#333333", // tab 上的文字默认颜色,仅支持十六进制颜色
"selectedColor": "#FF4A2F", // tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor": "#FFFFFF", // tab 的背景色,仅支持十六进制颜色
"borderStyle": "black", // tabbar 上边框的颜色, 仅支持 black / white
"position": "bottom", // tabBar 的位置,仅支持 bottom / top
},
}
自定义 tabbar:
- 配置信息:在
app.json
中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
{ "tabBar": { "custom": true, "color": "#333333", "selectedColor": "#FF4A2F", "backgroundColor": "#FFFFFF", "list": [{ "pagePath": "page/index/index", "text": "首页" }, { "pagePath": "page/log/log", "text": "日志" }] }, "usingComponents": {} }
- 添加 tabBar 代码文件,编写 tabBar 代码:需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染,推荐用 fixed 在底部的
cover-view
+cover-image
组件渲染样式,以保证 tabBar 层级相对较高。与 tabBar 样式相关的接口,如
wx.setTabBarItem
等将失效。
每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。
如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。 - 在需要的页面引入 tabbar 组件即可。