uniapp在tabbar上角标

### 实现 UniApp TabBar 上的角标功能

为了实现在 UniApp 的 `TabBar` 上显示角标的特性，可以利用 JavaScript API 动态设置 tabbar item 的属性[^1]。具体来说，可以通过调用 `uni.setTabBarItem` 方法来更新指定项的文字内容或图标，并且支持为该项添加角标。

#### 使用 setTabBarItem 更新 TabBar Item 属性

此方法允许开发者针对特定索引位置的 tabbar 项目进行个性化的调整，比如更改名称或是为其附加一个小红点形式的通知数目作为角标。以下是具体的函数签名：

uni.setTabBarItem({
    index: Number,      // 要修改的tabItem的序号，从0开始
    text?: String,     // 新的tab文字
    iconPath?: String, // 图片路径，iconType=0时有效
    selectedIconPath? :String // 选中状态下的图片路径，iconType=0时有效
})

对于想要给某个标签页增加角标的情况，则只需关注 `index` 和新增加的一个参数——`badgeText` 来表示要显示的内容即可。

#### 定义全局定时器刷新消息数

考虑到实际应用场景下可能需要定期检查是否有新的通知到来以便及时反映在界面上，可以在应用启动之初就在根组件 (`App.vue`) 中设定好一个周期性的任务去请求服务器端的数据源获取最新的未读计数信息[^3]。每当接收到新数据之后就立即调用上述提到过的 `setTabBarItem()` 函数完成 UI 刷新工作。

需要注意的是当用户离开了含有 tabbar 的页面后应当记得移除相应的事件监听以防内存泄漏以及不必要的网络开销；同样地，在重新进入该类视图之前也要恢复这些必要的绑定操作以确保一切正常运作。

#### 示例代码

下面给出一段简单的例子用于演示如何结合以上知识点创建带角标的自定义 tabbar 并保持其上数值随时间变化而同步更新的效果:

// App.vue 或者 app.js 文件内初始化部分
export default {
  onLaunch() {
    this.startMessagePolling();
  },
  
  methods:{
    startMessagePolling(){
        const that = this;
        setInterval(() => {
            let newCount = /* 假设这是从服务端取回的新消息总数 */;
            
            try{
                uni.setTabBarItem({
                    index: 2,
                    badgeText: `${newCount}`
                });
                
            }catch(e){
               console.error('Failed to update tab bar badge:', e);
            }
        }, 5000); // 每隔五秒轮询一次
    }
}