uni-app原生tabbar不支持数字气泡，必须用custom:true自定义组件实现；核心是通过uni.$emit/watch同步badge、缓存管理、节流更新及绝对定位气泡样式。
uni-app 的 tabBar 原生不支持数字气泡，必须用自定义 TabBar 替代
uni-app 官方 tabBar 配置只允许显示文字、图标和选中状态，badge、dot 或数字气泡完全不可配置。哪怕你在 pages.json 里写 "badge": "3"，也不会渲染——这不是 bug，是设计限制。想动态显示未读数，唯一可靠路径是关闭原生 tabBar（"custom": true），手写一个可响应式更新的自定义组件。
怎么写一个支持 setTabBarBadge 语义的自定义 TabBar 组件
核心思路：用 vuex 或 uni.$emit + watch 实现跨页面 badge 同步；组件内用 v-if 控制气泡显隐，:text 绑定动态数字。注意别直接用 props 传 badge 值——TabBar 是全局固定组件，无法从子页面单向传值。
- 在
components/custom-tabbar.vue中用computed读取uni.getStorageSync('tabbar_badge') || {}或监听uni.$on('updateTabbarBadge') - 每个 tab 项用
<view class="tab-item"></view>，避免用uni.switchTab硬跳转导致页面栈异常 - 气泡样式用绝对定位 +
transform: translate(50%, -50%)居中，数字超过 99 显示为"99+"，避免宽度溢出 - 不要在
mounted里一次性读取所有 badge，而是每次onShow触发时调用this.$forceUpdate()或重设 reactive 数据
为什么 uni.setTabBarBadge 在自定义 TabBar 下无效
因为该 API 仅作用于原生 tabBar，一旦 pages.json 中设置了 "custom": true，整个 tabBar 渲染权移交 JS 层，原生 API 就失去目标。你调用 uni.setTabBarBadge({index: 1, text: '5'}) 不会报错，但也不会有任何效果——控制台也看不到 warning。
- 替代方案：封装一个
updateBadge(index, text)方法，内部写入本地缓存并触发事件：uni.setStorageSync('tabbar_badge_' + index, text); uni.$emit('tabbar-badge-change') - 务必在 App.vue 的
onLaunch和onShow中调用一次同步逻辑，否则冷启动后 badge 为空 - H5 平台要注意 sessionStorage 生命周期，建议统一用
uni.setStorage而非localStorage
动态 badge 的性能与兼容性坑点
频繁更新 badge（比如 IM 消息每秒进多条）容易引发重绘抖动，尤其低端安卓机上 tab 文字会“跳动”。这不是样式问题，是 text 字段变化触发了整个 tab-item 的 diff 重建。
- 对 badge 值做节流：连续 300ms 内只取最后一次值，用
setTimeout+clearTimeout实现 - 避免在 badge 中使用复杂计算，例如
{{ unreadCount > 99 ? '99+' : unreadCount }}比{{ formatBadge(unreadCount) }}更轻量 - 微信小程序真机调试时，
uni.getStorageSync在 onLaunch 阶段可能返回 undefined，需加空值 fallback - App 平台（iOS/Android）若开启「vibrate」反馈，别在 badge 更新时触发，否则用户切 tab 会误震
z-index 最顶层，且不能被 scroll-view 或 cover-view 遮盖**——否则气泡点击无响应，看起来像“失效”，其实是事件被拦截了。
