uni.setTabBarBadge不能用于自定义Tabbar，因其仅作用于pages.json配置的原生tabBar；自定义Tabbar需自行用HTML+CSS实现红点，通过Pinia等状态管理同步数据并确保激活时重绘。
为什么uni.setTabBarBadge不能用在自定义Tabbar上
直接说结论：uni.setTabBarBadge 和 uni.showTabBarRedDot 这两个 API 只对 pages.json 里配置的「原生 tabBar」生效，跟自定义 Tabbar 组件完全无关。你把它写在 CustomTabbar.vue 里，或者在自定义组件里调用，真机上一定没反应——不是代码写错，是根本没走对地方。
自定义Tabbar红点得靠自己画
自定义 Tabbar 本质就是个普通 Vue 组件，所有 UI 元素（包括红点、数字角标）都得你自己用 HTML + CSS 实现。核心思路就一条：把红点/数字作为图标旁的绝对定位元素，通过状态驱动显隐和内容。
- 红点用
position: absolute和top/right偏移定位 - 数字角标同理，但要加
text-align: center、font-size、min-width防止单数字太窄 - 是否显示，由一个响应式变量控制，比如
v-if="tabList[0].badge"或:class="{ 'show': tabList[0].isDot }" - 别硬写死像素偏移值，不同图标尺寸差异大；建议用
transform: translate(50%, -50%)居中锚点，再配right: 4px; top: 4px微调
状态怎么同步才不丢、不乱
自定义 Tabbar 的红点状态如果散落在各个页面里手动更新，很快就会出现「切过去没红点」「点进去又冒出来」「A 页面清了，B 页面还挂着」这类问题。必须收口管理。
- 用
Pinia（或Vuex）存一个全局对象，比如tabBadges: { message: 3, cart: 1, notify: 0 } - 所有触发源（WebSocket 收消息、API 返回未读数、用户点击已读）都 dispatch 同一个 action 更新这个 store
- 自定义 Tabbar 组件 watch 或 computed 这个 store 字段，自动 re-render
- 清除逻辑要明确：
0表示无角标，null或undefined不代表清空，统一用0判定
真机上红点位置跑偏怎么办
开发者工具看着居中，一上真机就右偏、下掉、甚至被裁掉——这不是 bug，是自定义组件里 icon 和 badge 的盒模型在不同端渲染不一致导致的。
- iOS 上
flex容器内absolute元素常因字体渲染差异偏移，建议给 badge 外层加position: relative的包裹容器 - 安卓部分 ROM（如 OPPO ColorOS）对
transform支持不稳定，可改用right: 6rpx; top: 6rpx这类固定偏移 + media query 微调 - 图标如果是
base64或远程 URL，加载完成前宽高为 0，会导致 badge 定位错乱；务必设置 icon 的width和height固定值 - 别依赖父容器
text-align: center来居中 badge，它只对 inline 元素有效；用position: absolute+transform更可靠
实际项目里最容易被忽略的，是自定义 Tabbar 的「激活态重绘时机」——比如从首页跳到消息页，Tabbar 组件可能复用旧实例，但 badge 数据没刷新。这时候光靠 watch store 不够，还得在页面 onShow 里主动触发一次 badge 同步，否则用户切回来第一眼看到的就是过期状态。
