微信小程序开发文档微信小程序API tabBar

2024-02-25 开发教程微信小程序开发文档匿名 3℃

wx.showTabBarRedDot(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

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

参数

Object object

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.showTabBar(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

显示 tabBar

参数

Object object

属性	类型	默认值	必填	说明
animation	boolean	false	否	是否需要动画效果
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.setTabBarStyle(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

动态设置 tabBar 的整体样式

参数

Object object

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

示例代码

wx.setTabBarStyle({
  color: '#FF0000',
  selectedColor: '#00FF00',
  backgroundColor: '#0000FF',
  borderStyle: 'white'
})

wx.setTabBarItem(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件。

参数

Object object

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
text	string	否	tab 上的按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

wx.setTabBarBadge(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

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

参数

Object object

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
text	string	是	显示的文本，超过 4 个字符则显示成 ...
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.setTabBarBadge({
  index: 0,
  text: '1'
})

wx.removeTabBarBadge(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

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

参数

Object object

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.hideTabBarRedDot(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

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

参数

Object object

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.hideTabBar(Object object)

基础库 1.9.0 开始支持，低版本需做兼容处理。

隐藏 tabBar

参数

Object object

属性	类型	默认值	必填	说明
animation	boolean	false	否	是否需要动画效果
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

上一节：微信小程序API 字体

下一节：微信小程序API 窗口

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序API tabBar

wx.showTabBarRedDot(Object object)

参数

Object object

wx.showTabBar(Object object)

参数

Object object

wx.setTabBarStyle(Object object)

参数

Object object

示例代码

wx.setTabBarItem(Object object)

参数

Object object

示例代码

wx.setTabBarBadge(Object object)

参数

Object object

示例代码

wx.removeTabBarBadge(Object object)

参数

Object object

wx.hideTabBarRedDot(Object object)

参数

Object object

wx.hideTabBar(Object object)

参数

Object object

微信小程序开发文档微信小程序API tabBar