使用场景描述
在一进入到小程序的时候就要将用户在购物车中添加的商品总数，要以角标的形式显示在tababr中。
代码实现
//index.vue
<script setup>
import { onLoad } from '@dcloudio/uni-app'
onLoad(()=>{
uni.setTabBarBadge({
index: 1,
text: '5' //为了实现效果所随便写的数字，正式开发中从需要从后端或者本地进行获取
})
})
</script>效果展示
uni.setTabBarBadge(OBJECT)介绍
作用
为tabBar某一项的右上角添加文本。
平台差异
| App | H5 | 微信小程序 | 支付宝 小程序 | 百度 小程序 | 抖音小程序 飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
OBJECT参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | √ | tabBar的哪一项，从左边算起，从0开始 |
| text | String | √ | 显示的文本，不超过3个半角字符 |
| success | Function | × | 接口调用成功的回调函数 |
| fail | Function | × | 接口调用失败的回调函数 |
| complete | Function | × | 接口调用结束的回调函数（成功、失败都会执行） |
uni.removeTabBarBadge(OBJECT)介绍
作用
移除tabBar某一项右上角的文本。
平台差异说明
OBJECT参数说明
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | √ | tabBar的哪一项，从左边算起，从0开始 |
| success | Function | × | 接口调用成功的回调函数 |
| fail | Function | × | 接口调用失败的回调函数 |
| complete | Function | × | 接口调用结束的回调函数（成功、失败都会执行） |
