原生导航栏右侧按钮红点需用webview.setTitleNViewButtonStyle(仅App端),传index和redDot布尔值,onReady后调用且须#ifdef APP-PLUS包裹;redDot与badgeText互斥,真机调试需注意平台差异与调用时机。

原生导航栏右侧按钮的红点提示,不能用 uni.showTabBarRedDot —— 那个只管底部 tabbar,和导航栏完全无关。
导航栏按钮红点必须用 webview.setTitleNViewButtonStyle
App 端(iOS/Android)原生导航栏右上角的红点,得通过操作当前页面的 webview 实现。核心是调用 setTitleNViewButtonStyle,传入按钮索引和 redDot 配置。
-
index是按钮在nvue或pages.json中titleNView.buttons数组里的下标,从 0 开始,最右边是 0 -
redDot是布尔值:true显示红点,false隐藏(注意:不是show/hide两个 API) - 必须在
onReady或之后调用,onLoad里大概率失败——webview实例还没准备好 - H5 和小程序平台不支持该能力,
#ifdef APP-PLUS必须包住
示例:
onReady() {
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const webview = page.$getAppWebview();
webview.setTitleNViewButtonStyle(0, { redDot: true });
// #endif
}
redDot 和 badgeText 不能共存
同一个按钮位置,redDot: true 和 badgeText: '3' 是互斥的。设了 badgeText,redDot 自动失效;反过来,设了 redDot,再设 badgeText 会覆盖红点并显示数字。
- 想纯红点提示(如“有新消息”但不强调数量),只设
redDot: true - 想显示数字(如未读数),用
badgeText: String(count),且必须是字符串 - 清空红点或数字:统一设
redDot: false或badgeText: '',但部分安卓机型对空字符串支持差,更稳妥的是显式设badgeText: undefined或删掉该字段
真机上红点位置偏移、闪烁、不触发?先查这三件事
开发者工具里一切正常,但 iOS 上红点贴着图标右边缘、华为手机上根本不出——这类问题几乎都出在平台差异和调用节奏上。
- 确保
pages.json里该页面启用了titleNView,且buttons数组已定义(哪怕只配一个空对象) - 不要在
onShow里反复调用setTitleNViewButtonStyle;状态变更时才更新,建议加标记位防抖,比如this.hasRedDotSet !== shouldShow - iOS 对连续操作敏感,两次设置间隔少于 60ms 可能丢帧或残留;加
setTimeout(..., 80)更稳
最易被忽略的一点:这个红点只存在于 App 端,微信/支付宝小程序里导航栏按钮压根不支持红点或 badge,连模拟都不行。如果项目要多端一致,就得在非 App 平台降级为自定义按钮 + CSS 小红点,但要注意那只是视觉模拟,无法响应系统级角标规则。


















