uni-halo/.agents/skills/uniapp-project/examples/api/ui/remove-tab-bar-badge.md

uni.removeTabBarBadge - 移除 TabBar 徽标示例

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge

概述

uni.removeTabBarBadge 用于移除 tabBar 某一项右上角的文本。

基础用法

uni.removeTabBarBadge({
  index: 0
})

完整示例

示例 1: 清除徽标

uni.removeTabBarBadge({
  index: 0, // tabBar 的哪一项，从左边算起
  success: () => {
    console.log('清除成功')
  },
  fail: (err) => {
    console.error('清除失败', err)
  }
})

示例 2: 清除未读消息徽标

function clearUnreadBadge() {
  uni.removeTabBarBadge({
    index: 1, // 消息页面的索引
    success: () => {
      console.log('未读消息徽标已清除')
    }
  })
}

示例 3: 在页面中使用

<template>
  <view class="container">
    <button @click="clearBadge">清除徽标</button>
  </view>
</template>

<script>
export default {
  methods: {
    clearBadge() {
      uni.removeTabBarBadge({
        index: 0,
        success: () => {
          uni.showToast({
            title: '已清除',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

示例 4: 阅读消息后清除

<template>
  <view class="container">
    <view 
      v-for="message in messages" 
      :key="message.id"
      class="message-item"
      @click="readMessage(message)"
    >
      <text>{{ message.content }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, content: '消息1', read: false },
        { id: 2, content: '消息2', read: false }
      ]
    }
  },
  methods: {
    readMessage(message) {
      message.read = true
      
      // 如果所有消息都已读，清除徽标
      const allRead = this.messages.every(msg => msg.read)
      if (allRead) {
        uni.removeTabBarBadge({
          index: 1 // 消息页面的索引
        })
      } else {
        // 更新未读数
        const unreadCount = this.messages.filter(msg => !msg.read).length
        uni.setTabBarBadge({
          index: 1,
          text: String(unreadCount)
        })
      }
    }
  }
}
</script>

示例 5: 清除所有徽标

function clearAllBadges(tabBarCount) {
  for (let i = 0; i < tabBarCount; i++) {
    uni.removeTabBarBadge({
      index: i
    })
  }
}

// 使用（假设有4个tabBar）
clearAllBadges(4)

参数说明

参数名	类型	必填	说明
index	Number	是	tabBar 的哪一项，从左边算起

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. index 从 0 开始，对应 pages.json 中 tabBar 的配置顺序
2. 如果该 tabBar 项没有徽标，调用此 API 不会报错
3. 建议在消息已读或数量为 0 时清除徽标
4. 与 setTabBarBadge 配合使用

参考资源

• 官方文档: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#removetabbarbadge
• 设置徽标: https://uniapp.dcloud.net.cn/api/ui/tab-bar.html#settabbarbadge