全部产品

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 大小,系统会对传入的非推荐尺寸的图片进行非等比拉伸或缩放。