tabBar

tabBar 使用说明

多 tab 小程序（小程序的底部栏可以切换页面）可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 配置

item 配置

代码示例

tabBar 代码示例如下：

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"      }
    ]
  }
}

my.hideTabBar

版本要求：基础库版本 1.11.0 或更高版本，低版本需要做 兼容处理。

该接口用于隐藏标签页（tabbar）。相关问题请参见 tabBar 常见问题。

代码示例

my.hideTabBar 代码示例如下：

my.hideTabBar({
    animation: true
})

入参

入参为 Object 类型，属性如下：

my.hideTabBarRedDot

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于隐藏标签页（tabbar）某一项右上角的红点。相关问题请参见 tabBar 常见问题。

效果示例

代码示例

my.hideTabBarRedDot 代码示例如下：

my.hideTabBarRedDot({
  index: 0
})

入参

Object 类型，属性如下：

my.removeTabBarBadge

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于移除标签页（tabbar） 某一项右上角的文本。相关问题请参见 tabBar 常见问题。

效果示例

代码示例

my.removeTabBarBadge 代码示例如下：

my.removeTabBarBadge({
  index: 0
})

入参

Object 类型，属性如下：

my.setTabBarBadge

版本要求：基础库 1.11.0 及以上版本。

该接口用于为标签页（tabbar）某一项的右上角添加文本。可用于设置消息条数的红点提醒。相关问题请参见 tabBar 常见问题。

效果示例

代码示例

my.setTabBarBadge 代码示例如下：

my.setTabBarBadge({
  index: 0,
  text: '42'
})

入参

Object 类型，属性如下：

my.setTabBarItem

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于动态设置标签页（tabbar）某一项的内容。相关问题请参见 tabBar 常见问题。

代码示例

my.setTabBarItem 代码示例如下：

my.setTabBarItem({
    index: 0,
    text: 'text',
    iconPath: '/image/iconPath',
    selectedIconPath: '/image/selectedIconPath'
})

入参

Object 类型，属性如下：

my.setTabBarStyle

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于动态设置标签页（tabbar）的整体样式，如文字颜色、标签背景色、标签边框颜色等。相关问题请参见 tabBar 常见问题。

代码示例

my.setTabBarStyle 代码示例如下：

my.setTabBarStyle({
    color: '#FF0000',
    selectedColor: '#00FF00',
    backgroundColor: '#0000FF',
    borderStyle: 'white'
})

入参

Object 类型，属性如下：

my.showTabBar

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于显示标签页（tabBar）。相关问题请参见 tabBar 常见问题。

代码示例

my.showTabBar 代码示例如下：

my.showTabBar({
    animation: true
})

入参

Object 类型，属性如下：

my.showTabBarRedDot

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于显示标签页（tabbar）某一项的右上角的红点。相关问题请参见 tabBar 常见问题。

代码示例

my.showTabBarRedDot 代码示例如下：

my.showTabBarRedDot({
  index: 0
})

入参

Object 类型，属性如下：

onTabItemTap

版本要求：基础库 1.11.0 或更高版本，若版本较低，建议做 兼容处理。

该接口用于点击标签（tab）时触发，可用于监听 tabBar 点击事件。相关问题请参见 tabBar 常见问题。

代码示例

onTabItemTap 代码示例如下：

//.js
Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

tabBar 常见问题

功能支持类问题

• Q：tabBar 页面是否支持带参数跳转？

  A：支持。

• Q：如何监听 tabBar 点击事件？

  A：在小程序页面中用 onTabItemTap 即可监听 tabBar 点击事件。

• Q：tabBar 的 icon 图标是否支持 svg 格式？

  A：不支持 svg 格式，只支持 png/jpeg/jpg/gif 图片格式。

• Q：如何设置 tab 的样式？

  A：可以在 JSON 文件中直接设置样式（代码示例如下所示），或者调用 my.setTabBarStyle API 进行设置。

  "tabBar": {
    "textColor": "#404040",
    "selectedColor": "#108ee9",
    "backgroundColor": "#F5F5F9"
  }

请求异常类问题

• Q：切换 tabBar 时报错“Cannot read property ‘getCurrentPages’ of undefined”，如何处理？ A：tabBar 路径错误导致，请检查 tabBar 路径。

• Q：跳转页面后，为何不显示 tabBar？

  A：通过页面跳转（my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，不会显示底部的 tab 栏。另外，tabBar 的第一个页面必须是首页。

• Q：tabBar 页面不支持带参数跳转吗？

  A：tabBar 页面目前不支持带参数跳转，建议跳转传参使用缓存或者全局变量。

• Q：小程序进入 tabBar 页面，如何获取上一级页面路径？

  A：在进入页面的时候将当前页面路径存入全局，在切换 tabBar 页面的时候拿全局的地址属性即可获取上一级页面路径。

• Q：在 IDE 中调试，为何 tabBar 切换时 onshow、onload 生命周期函数不执行？

  A：tabBar 切换需要在真机上测试，IDE 中调试时不触发。