uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

属性类型默认值必填说明
indexnumber是tabBar 的哪一项，从左边算起
textString否tab 上的按钮文字
iconPathString否图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPathString否选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px ，当 postion 为 top 时，此参数无效
successFuntion否接口调用成功的回调函数
failFuntion否接口调用失败的回调函数
completeFuntion否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

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

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

属性类型默认值必填说明
colorString是tab 上的文字默认颜色，HexColor
selectedColorString是tab 上的文字选中时的颜色，HexColor
backgroundColorString是tab 的背景色，HexColor
borderStyleString是tabBar上边框的颜色， 仅支持 black/white
successFuntion否接口调用成功的回调函数
failFuntion否接口调用失败的回调函数
completeFuntion否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

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

uni.hideTabBar(OBJECT)

隐藏 tabBar

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

属性类型默认值必填说明
animationbooleanfalse否是否需要动画效果，仅微信小程序和百度小程序支持
successFuntion否接口调用成功的回调函数
failFuntion否接口调用失败的回调函数
completeFuntion否接口调用结束的回调函数（调用成功、失败都会执行）

uni.showTabBar(OBJECT)

显示 tabBar

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

属性类型默认值必填说明
animationbooleanfalse否是否需要动画效果，仅微信小程序和百度小程序支持
successFuntion否接口调用成功的回调函数
failFuntion否接口调用失败的回调函数
completeFuntion否接口调用结束的回调函数（调用成功、失败都会执行）

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

参数类型必填说明
indexNumber是tabBar的哪一项，从左边算起
textString是显示的文本，不超过 3 个半角字符
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

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

uni.removeTabBarBadge(OBJECT)

移除 tabBar 某一项右上角的文本。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

参数类型必填说明
indexNumber是tabBar的哪一项，从左边算起
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

参数类型必填说明
indexNumber是tabBar的哪一项，从左边算起
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√√√x

OBJECT参数说明：

参数类型必填说明
indexNumber是tabBar的哪一项，从左边算起
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

Tip

  • tabbar是原生的，层级高于前端元素
  • uni-app插件市场有封装的前端tabbar，但性能不如原生tabbar
  • 如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

发现错误？想参与编辑？在 GitHub 上编辑此页面！