不能靠uni.setTabBarBadge实现带数字气泡的动态Tabbar，因其仅对原生tabBar生效，启用"custom":true后该API彻底失效；自定义tabBar需用绝对定位+动态class渲染气泡，并注意跨端适配细节。
不能靠 uni.setTabBarBadge 实现带数字气泡的动态 Tabbar——它只对原生 tabBar 生效，而一旦你启用了自定义 tabbar（"custom": true），这个 API 就彻底失效。
为什么 uni.setTabBarBadge 在自定义 tabbar 下无效
因为 uni.setTabBarBadge 是平台原生 tabBar 的专属接口，仅作用于 pages.json 中配置的静态 tabBar。当你在 pages.json 里写了 "custom": true，uni-app 就完全绕过原生渲染逻辑，底层 tabBar 根本没挂载，调用该 API 不报错但也不生效。
- 微信小程序：只支持原生 tabBar 页面，且必须是
tabBar.list中声明过的页面 - H5 / App 端：部分平台根本不支持该接口，或需额外 manifest 配置（如 iOS badge 权限）
- 真机常见现象：模拟器能显示，真机无反应——本质是平台能力未就绪，不是代码问题
数字气泡必须用绝对定位 + 动态 class 渲染
自定义 tabbar 的气泡，本质是「在图标容器内叠加一个 <view>」，靠 CSS 定位+数据驱动显隐和内容。关键不是“怎么画”，而是“怎么贴准”和“怎么同步”。
- 每个 tab 项需包裹一层
<view class="tab-item">，设position: relative - 气泡元素写在 icon 同级：
<view class="badge" v-if="tab.badge">{{ tab.badge }}</view> - CSS 必须含
position: absolute; top: 4px; right: 6px; transform: translate(50%, -50%);——不加transform会导致不同字体/平台偏移不一致 - 避免用
uni-badge组件直接套 tabbar：它不响应路由变化，切换 tab 时容易残留旧 badge
动态配置下 badge 数据怎么更新才不丢、不卡
badge 数字不是每次 onShow 都去请求，而是绑定到全局状态（如 Pinia store 或 uni.getStorageSync），由业务逻辑触发变更。
- 推荐结构：
store/tabbar.js中定义badgeMap: { '/pages/msg/index': 3, '/pages/order/index': 1 } - tab 组件通过
computed映射当前页 badge：currentBadge() { return this.badgeMap[this.currentPage] || 0 } - 消息到达时，不直接改 DOM，而是
store.updateBadge('/pages/msg/index', newCount)，触发视图重绘 - 避免在
onShow里调uni.getStorage查 badge：异步 IO + 多次触发易导致闪烁或覆盖
多端适配最容易被忽略的三个点
气泡看着简单，但跨端时位置、大小、圆角、是否遮挡图标边缘，全都不一样。不处理这些，上线后就会发现 iOS 偏右 2px、安卓压住图标下半截、H5 字体撑开容器。
- 图标尺寸统一用 40×40px，气泡宽高设为
16px（iOS 最小可触区域要求） - 圆角固定
border-radius: 8px，不要用50%——某些 Android WebView 渲染椭圆 - 给 badge 加
font-size: 10px; line-height: 16px; padding: 0 4px;，确保单数字居中不晃动
