uni-halo/.agents/bak-skills/uniappx-project/examples/api/ui/hide-tab-bar-red-dot.md

uni.hideTabBarRedDot - 隐藏 TabBar 红点示例

官方文档

参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot

概述

uni.hideTabBarRedDot 用于隐藏 tabBar 某一项的右上角的红点。

基础用法

uni.hideTabBarRedDot({
  index: 0
})

完整示例

示例 1: 隐藏红点

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

示例 2: 阅读消息后隐藏

function readMessage(messageId) {
  // 标记消息为已读
  uni.request({
    url: `https://api.example.com/messages/${messageId}/read`,
    method: 'POST',
    success: () => {
      // 隐藏消息红点
      uni.hideTabBarRedDot({
        index: 1 // 消息页面的索引
      })
    }
  })
}

示例 3: 在页面中使用

<template>
  <view class="container">
    <button @click="hideRedDot">隐藏红点</button>
  </view>
</template>

<script>
export default {
  methods: {
    hideRedDot() {
      uni.hideTabBarRedDot({
        index: 0,
        success: () => {
          uni.showToast({
            title: '已隐藏',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

示例 4: 进入页面时隐藏

<template>
  <view class="container">
    <text>消息列表</text>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 进入消息页面时隐藏红点
    uni.hideTabBarRedDot({
      index: 1 // 当前页面的索引
    })
  }
}
</script>

示例 5: 清除所有红点

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

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

参数说明

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

平台兼容性

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

注意事项

1. index 从 0 开始，对应 pages.json 中 tabBar 的配置顺序
2. 如果该 tabBar 项没有红点，调用此 API 不会报错
3. 建议在用户查看相关内容后隐藏红点
4. 与 showTabBarRedDot 配合使用

参考资源

• 官方文档: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#hidetabbarreddot
• 显示红点: https://doc.dcloud.net.cn/uni-app-x/api/ui/tab-bar.html#showtabbarreddot