平台差异说明

OBJECT参数说明:

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

示例代码

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

平台差异说明

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

OBJECT参数说明:

属性类型默认值必填说明
colorStringtab 上的文字默认颜色,HexColor
selectedColorStringtab 上的文字选中时的颜色,HexColor
backgroundColorStringtab 的背景色,HexColor
borderStyleStringtabBar上边框的颜色, 仅支持 black/white
successFuntion接口调用成功的回调函数
failFuntion接口调用失败的回调函数
completeFuntion接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

隐藏 tabBar

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

OBJECT参数说明:

uni.showTabBar(OBJECT)

显示 tabBar

平台差异说明

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

OBJECT参数说明:

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

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

平台差异说明

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

OBJECT参数说明:

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

示例代码

uni.removeTabBarBadge(OBJECT)

平台差异说明

OBJECT参数说明:

参数类型必填说明
indexNumbertabBar的哪一项,从左边算起
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

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

平台差异说明

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

OBJECT参数说明:

参数类型必填说明
indexNumbertabBar的哪一项,从左边算起
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

uni.hideTabBarRedDot(OBJECT)

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

平台差异说明

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

OBJECT参数说明:

  • tabbar是原生的,层级高于前端元素
  • 如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

发现错误?想参与编辑?在 GitHub 上编辑此页面!