全部产品
云市场

tabBar

更新时间:2020-03-31 09:54:32

my.hideTabBar

版本要求:基础库版本 1.11.0 或更高版本,低版本需要做 兼容处理

隐藏标签页(tabbar)。
相关问题请参见 tabBar 常见问题

示例代码

  1. my.hideTabBar({
  2. animation: true
  3. })

入参

入参为 Object 类型,属性如下:

属性 类型 必填 说明
animation Boolean 是否需要动画效果,默认无。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.hideTabBarRedDot

版本要求:基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理
注意:IDE 暂不支持模拟,请以真机调试效果为准。

隐藏标签页(tabbar)某一项右上角的红点。
相关问题请参见 tabBar 常见问题

效果示例

hideTabBarRedDot

示例代码

  1. my.hideTabBarRedDot({
  2. index: 0
  3. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
index Number tabbar 的哪一项,从左边算起。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.removeTabBarBadge

版本要求:基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理
注意:IDE 暂不支持模拟,请以真机调试效果为准。

移除标签页(tabbar) 某一项右上角的文本。
相关问题请参见 tabBar 常见问题

效果示例

removeTabBarBadge

示例代码

  1. my.removeTabBarBadge({
  2. index: 0
  3. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
index Number 标签页的项数序号,从左边开始计数。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarBadge

版本要求:基础库 1.11.0 及以上版本。
注意:IDE 暂不支持模拟,请以真机调试效果为准。

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

效果示例

setTabBarBadge

示例代码

  1. my.setTabBarBadge({
  2. index: 0,
  3. text: '42'
  4. })

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
text String 显示的文本,超过三个字符则显示成前两个字符+“…”,例如:“支付宝”显示“支付宝”,“蚂蚁金服”显示“蚂蚁…”。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarItem

版本要求:基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理
注意:IDE 暂不支持模拟,请以真机调试效果为准。

动态设置标签页(tabbar)某一项的内容。
相关问题请参见 tabBar 常见问题

示例代码

  1. my.setTabBarItem({
  2. index: 0,
  3. text: 'text',
  4. iconPath: '/image/iconPath',
  5. selectedIconPath: '/image/selectedIconPath'
  6. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
index Number 标签页的项数序号,从左边开始计数。
text String 标签页按钮上的文字。
iconPath String 图片路径,建议尺寸为 81px * 81px,支持 png/jpeg/jpg/gif 图片格式,支持网络图片。
selectedIconPath String 选中时的图片路径,建议尺寸为 81px * 81px,支持 png/jpeg/jpg/gif 图片格式,支持网络图片。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarStyle

版本要求:基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理
注意:IDE 暂不支持模拟,请以真机调试效果为准。

动态设置标签页(tabbar)的整体样式,如文字颜色、标签背景色、标签边框颜色等。
相关问题请参见 tabBar 常见问题

示例代码

  1. my.setTabBarStyle({
  2. color: '#FF0000',
  3. selectedColor: '#00FF00',
  4. backgroundColor: '#0000FF',
  5. borderStyle: 'white'
  6. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
color HexColor 标签(tab)上的文字默认颜色
selectedColor HexColor 标签(tab)上的文字选中时的颜色
backgroundColor HexColor 标签(tab)的背景色
borderStyle String 标签页(tabbar)上边框的颜色, 仅支持 blackwhite
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.showTabBar

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

显示标签页(tabbar)。
相关问题请参见 tabBar 常见问题

示例代码

  1. my.showTabBar({
  2. animation: true
  3. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
animation Boolean 是否需要动画效果,默认无。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.showTabBarRedDot

版本要求:基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理
注意:IDE 暂不支持模拟,请以真机调试效果为准。

显示标签页(tabbar)某一项的右上角的红点。
相关问题请参见 tabBar 常见问题

示例代码

  1. my.showTabBarRedDot({
  2. index: 0
  3. })

入参

Object 类型,属性如下:

属性 类型 必填 说明
index Number 标签页的项数序号,从左边开始计数。
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

onTabItemTap

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

点击标签(tab)时触发,可用于监听 tabBar 点击事件。
相关问题请参见 tabBar 常见问题

示例代码

  1. //.js
  2. Page({
  3. onTabItemTap(item) {
  4. console.log(item.index)
  5. console.log(item.pagePath)
  6. console.log(item.text)
  7. }
  8. })

TabBar 常见问题

如何监听 TabBar 点击事件?

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

TabBar 页面不支持带参数跳转吗?

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

切换 TabBar 时报错“Cannot read property ‘getCurrentPages’ of undefined”,如何处理?

tabBar 路径错误导致,请检查 tabBar 路径。

TabBar 为何在真机中不显示,但在 IDE 模拟器中可以正常显示?

若 TabBar 配置的 icon 路径是相对路径,将导致真机不显示。icon 图标需使用绝对路径,示例代码如下所示:

  1. "tabBar": {
  2. "items": [
  3. {
  4. "pagePath": "page/tabBar/component/index",
  5. "icon": "image/icon_component.png",
  6. "activeIcon": "image/icon_component_HL.png",
  7. "name": "组件"
  8. },
  9. {
  10. "pagePath": "page/tabBar/API/index",
  11. "icon": "image/icon_API.png",
  12. "activeIcon": "image/icon_API_HL.png",
  13. "name": "API"
  14. }
  15. ]
  16. }

TabBar 的 icon 图标是否支持 svg 格式?

不支持 svg 格式,只支持 png/jpeg/jpg/gif 图片格式。

在 IDE 中调试,为何 TabBar 切换时 onshow、onload 生命周期函数不执行?

TabBar 切换需要在真机上测试,IDE 中调试时不触发。

如何设置 Tab 的样式?

可以在 JSON 文件中直接设置样式(示例代码如下所示),或者调用 my.setTabBarStyle API 进行设置。

  1. "tabBar": {
  2. "textColor": "#404040",
  3. "selectedColor": "#108ee9",
  4. "backgroundColor": "#F5F5F9"
  5. }

跳转页面后,为何不显示 tabBar 呢?

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