uniapp动态修改样式_uniapp 动态设置 tabBar 的整体样式

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

否

接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarItem({

index: 0,

text: 'text',

iconPath: '/path/to/iconPath',

selectedIconPath: '/path/to/selectedIconPath'

})

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

否

接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarStyle({

color: '#FF0000',

selectedColor: '#00FF00',

backgroundColor: '#0000FF',

borderStyle: 'white'

})

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

否

接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarBadge({

index: 0,

text: '1'

})

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