uniapp底部导航添加角标
时间: 2025-07-16 07:29:52 浏览: 4
在 UniApp 中为底部导航栏(TabBar)添加角标(Badge)可以通过 `uni.setTabBarBadge` 接口实现。这个接口允许开发者为指定的 TabBar 页面设置角标数字[^3]。
### 添加角标
要为某个 TabBar 页面添加角标,可以使用以下代码:
```javascript
uni.setTabBarBadge({
index: 1, // TabBar 页面的索引
text: '5' // 角标显示的数字
});
```
在上面的代码中,`index` 参数指定了 TabBar 页面的索引,而 `text` 参数则定义了角标上显示的文本内容。
### 移除角标
如果需要移除某个 TabBar 页面上的角标,可以使用 `uni.removeTabBarBadge` 接口:
```javascript
uni.removeTabBarBadge({
index: 2 // TabBar 页面的索引
});
```
### 隐藏红点
如果你想要隐藏红点而不是数字角标,则可以使用 `uni.hideTabBarRedDot` 接口:
```javascript
uni.hideTabBarRedDot({
index: 3 // TabBar 页面的索引
});
```
### 动态刷新角标
为了实现动态刷新 TabBar 页面上的角标,可以在全局的 `App.vue` 文件中定义一个定时刷新消息的方法,并通过 `uni.$on()` 监听对应点击的 TabBar 页面所传参数,进行判断执行对应的操作。当切换到非 TabBar 页面时,可以通过 `onHide` 生命周期函数取消监听,停止获取消息。
### 示例代码
下面是一个在 `onLoad` 生命周期中设置角标的示例:
```javascript
<script setup>
import { onLoad } from '@dcloudio/uni-app';
onLoad(() => {
uni.setTabBarBadge({
index: 1,
text: '5' // 正式开发中应该从后端或本地获取数据
});
});
</script>
```
### 注意事项
- 在全局控制底部 Tab 消息数量的刷新显示时需要注意,如果当前页面不是 TabBar 页面,可能会导致错误。
- 应该在切换到非 TabBar 页面时取消监听,避免不必要的资源消耗和潜在错误。
阅读全文
相关推荐

















