uniapp 动态设置 tabBar 的整体样式

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

### [uni.setTabBarItem(OBJECT)][uni.setTabBarItem_OBJECT] ###

动态设置 tabBar 某一项的内容

**平台差异说明**

<table> 
 <thead> 
  <tr> 
   <th>App</th> 
   <th>H5</th> 
   <th>微信小程序</th> 
   <th>支付宝小程序</th> 
   <th>百度小程序</th> 
   <th>头条小程序</th> 
   <th>QQ小程序</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>√</td> 
   <td>√</td> 
   <td>√</td> 
   <td>√</td> 
   <td>√</td> 
   <td>x</td> 
   <td>√</td> 
  </tr> 
 </tbody> 
</table>

**OBJECT参数说明：**

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

**示例代码**

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

### [uni.setTabBarStyle(OBJECT)][uni.setTabBarStyle_OBJECT] ###

动态设置 tabBar 的整体样式

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>是</td> 
   <td>tab 上的文字默认颜色，HexColor</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>是</td> 
   <td>tab 上的文字选中时的颜色，HexColor</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>是</td> 
   <td>tab 的背景色，HexColor</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>是</td> 
   <td>tabBar上边框的颜色， 仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

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

### [uni.hideTabBar(OBJECT)][uni.hideTabBar_OBJECT] ###

隐藏 tabBar

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animation</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否需要动画效果，仅微信小程序和百度小程序支持</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Funtion</td> 
   <td>&nbsp;</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

### [uni.showTabBar(OBJECT)][uni.showTabBar_OBJECT] ###

显示 tabBar

**平台差异说明**

**OBJECT参数说明：**

### [uni.setTabBarBadge(OBJECT)][uni.setTabBarBadge_OBJECT] ###

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

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>tabBar的哪一项，从左边算起</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>是</td> 
   <td>显示的文本，不超过 3 个半角字符</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

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

### [uni.removeTabBarBadge(OBJECT)][uni.removeTabBarBadge_OBJECT] ###

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

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>tabBar的哪一项，从左边算起</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

### [uni.showTabBarRedDot(OBJECT)][uni.showTabBarRedDot_OBJECT] ###

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

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>tabBar的哪一项，从左边算起</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

### [uni.hideTabBarRedDot(OBJECT)][uni.hideTabBarRedDot_OBJECT] ###

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

**平台差异说明**

**OBJECT参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>tabBar的哪一项，从左边算起</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

### [uni.onTabBarMidButtonTap(CALLBACK)][uni.onTabBarMidButtonTap_CALLBACK] ###

监听中间按钮的点击事件

**平台差异说明**

<table> 
 <thead> 
  <tr> 
   <th>App</th> 
   <th>H5</th> 
   <th>微信小程序</th> 
   <th>支付宝小程序</th> 
   <th>百度小程序</th> 
   <th>头条小程序</th> 
   <th>QQ小程序</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>√（HBuilderX 2.3.4+）</td> 
   <td>x</td> 
   <td>x</td> 
   <td>x</td> 
   <td>x</td> 
   <td>x</td> 
   <td>x</td> 
  </tr> 
 </tbody> 
</table>

[uni.setTabBarItem_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem
[uni.setTabBarStyle_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarstyle
[uni.hideTabBar_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=hidetabbar
[uni.showTabBar_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbar
[uni.setTabBarBadge_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarbadge
[uni.removeTabBarBadge_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=removetabbarbadge
[uni.showTabBarRedDot_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbarreddot
[uni.hideTabBarRedDot_OBJECT]: https://uniapp.dcloud.io/api/ui/tabbar?id=hidetabbarreddot
[uni.onTabBarMidButtonTap_CALLBACK]: https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap