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

高亮图标路径

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

阿里云首页 管理控制台 相关技术圈