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 配置项如下：

每个 item 配置：

icon 图标推荐大小为 60×60 px 大小，系统会对传入的非推荐尺寸的图片进行非等比拉伸或缩放。