uniapp 动态设置 tabBar 的整体样式

Bertha 。 2023-06-27 03:53 38阅读 0赞

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:






























































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

示例代码

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

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:






























































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

示例代码

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

uni.hideTabBar(OBJECT)

隐藏 tabBar

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:









































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

uni.showTabBar(OBJECT)

显示 tabBar

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:









































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

uni.setTabBarBadge(OBJECT)

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

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:










































参数 类型 必填 说明
index Number tabBar的哪一项,从左边算起
text String 显示的文本,不超过 3 个半角字符
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

uni.removeTabBarBadge(OBJECT)

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

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:




































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

uni.showTabBarRedDot(OBJECT)

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

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:




































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

uni.hideTabBarRedDot(OBJECT)

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

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
x

OBJECT参数说明:




































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

uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

平台差异说明
























App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√(HBuilderX 2.3.4+) x x x x x x

发表评论

表情:
评论列表 (有 0 条评论,38人围观)

还没有评论,来说两句吧...

相关阅读