TabBar 常见问题
如何监听 TabBar 点击事件?
在小程序页面中用 onTabItemTap 即可监听 TabBar 点击事件。
TabBar 页面不支持带参数跳转吗?
TabBar 页面目前不支持带参数跳转,建议跳转传参使用缓存或者全局变量。
切换 TabBar 时报错“Cannot read property 'getCurrentPages' of undefined”,如何处理?
tabBar 路径错误导致,请检查 tabBar 路径。
TabBar 为何在真机中不显示,但在 IDE 模拟器中可以正常显示?
若 TabBar 配置的 icon 路径是相对路径,将导致真机不显示。icon 图标需使用绝对路径,示例代码如下所示:
"tabBar": {
"textColor": "#888888",
"selectedColor": "#ff6a00",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"icon": "https://gw.alicdn.com/tfs/TB1D5aEq8v0gK0jSZKbXXbK2FXa-96-96.png",
"activeIcon": "https://gw.alicdn.com/tfs/TB1BvOEq9f2gK0jSZFPXXXsopXa-96-96.png",
"name": "组件"
},
{
"pagePath": "pages/api/api",
"icon": "https://gw.alicdn.com/tfs/TB1VS5Hq4v1gK0jSZFFXXb0sXXa-96-96.png",
"activeIcon": "https://gw.alicdn.com/tfs/TB1XnmHqYj1gK0jSZFOXXc7GpXa-96-96.png",
"name": "API"
}
]
}
TabBar 的 icon 图标是否支持 svg 格式?
不支持 svg 格式,只支持 png/jpeg/jpg/gif 图片格式。
在 IDE 中调试,为何 TabBar 切换时 onshow、onload 生命周期函数不执行?
TabBar 切换需要在真机上测试,IDE 中调试时不触发。
如何设置 Tab 的样式?
可以在 JSON 文件中直接设置样式(示例代码如下所示),或者调用 my.setTabBarStyle API 进行设置。
"tabBar": {
"textColor": "#404040",
"selectedColor": "#108ee9",
"backgroundColor": "#F5F5F9"
}
跳转页面后,为何不显示 tabBar 呢?
通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,不会显示底部的 tab 栏。另外,tabBar 的第一个页面必须是首页。
tabBar
tabBar 配置项如下:
属性 | 类型 | 是否必填 | 描述 |
textColor | HexColor | 否 | 文字颜色 |
selectedColor | HexColor | 否 | 选中文字颜色 |
backgroundColor | HexColor | 否 | 背景色 |
items | Array | 是 | 每个 tab 配置 |
每个 item 配置:
属性 | 类型 | 是否必填 | 描述 |
pagePath | String | 是 | 设置页面路径 |
name | String | 是 | 名称 |
icon | String | 否 | 平常图标路径 |
activeIcon | String | 否 | 高亮图标路径 |