必须设置 navigationstyle: "custom" 才能启用自定义导航栏，全局或页面级配置均可，但设为 custom 后无法切回原生；h5 需手动处理状态栏高度，小程序需对齐胶囊按钮；分类数据应异步加载并缓存，tab 选中态须通过 emit 通知父组件更新，禁止直接修改 props。
pages.json里必须设 navigationStyle: "custom"
不设这个，自定义导航栏组件永远被原生导航栏盖住，尤其在小程序里——哪怕你写了 z-index、position: fixed 也没用。这是最常被忽略的第一步。
全局设置更稳妥："globalStyle": { "navigationStyle": "custom" }。如果只对某页生效，就写在对应页面的 style 里，但注意：一旦全局设了 custom，单页无法再切回原生导航栏。
- 设成
default或transparent都不行，只有custom才真正释放 DOM 控制权 - H5 端设了
custom后，顶部会留白，需手动计算状态栏高度（uni.getSystemInfoSync().statusBarHeight）并 top 偏移 - 小程序端胶囊按钮（右上角返回键区域）位置固定，自定义导航栏高度必须与之对齐，否则视觉割裂；推荐用
height: calc(var(--window-top) + 44px)或直接取capsule节点 rect
tab 数据得从 API 拉，别硬编码在 data 里
分类导航栏的核心是动态数据源，比如「美食」「穿搭」「数码」这类标签来自后端接口。直接写死在 data() 里会导致首屏卡顿、无法响应权限变化、缓存难管理。
正确做法是在组件 created 或 mounted 中调用接口，并用 v-if 控制 tab 渲染时机，避免空数组渲染出空白栏。
- 接口返回结构建议统一为：
[{ id: 'food', name: '美食', icon: '/static/icon/food.png', selectedIcon: '/static/icon/food-active.png' }] - 加载中加骨架屏或
loading状态提示，否则用户点击无反馈 - 失败时保留上次成功数据（
localStorage或uni.setStorageSync），避免白屏 - 不要在
watch里反复请求，用防抖或节流控制刷新频率
选中态切换要 emit 事件，别直接改父组件 data
自定义 tab 组件内部不能直接修改父组件传入的 current 值（Vue 2 不允许 props 响应式修改，Vue 3 的 defineProps 也禁止），否则控制台报错且状态不同步。
必须通过 this.$emit('change', index)（Vue 2）或 emit('change', index)（Vue 3）通知父组件，由父组件决定是否更新当前 tab。
- 父组件监听时，要用
@change="handleTabChange"，并在方法里显式赋值this.current = index - 避免用
v-model封装，uni-app 的v-model在跨平台下行为不稳定，尤其 H5 和小程序差异大 - 如果需要默认高亮第一个，应在父组件
onLoad里初始化current，而非在子组件里data()默认设 0
图标和文字对齐容易错位，rpx 计算要分平台
同一套 rpx 在 iOS、Android、微信小程序、支付宝小程序、H5 上渲染高度不一致，尤其图标和文字垂直居中问题频发。
最稳方案是不用 flex: center，改用 line-height 匹配容器高度，并给 icon 加 vertical-align: middle。
- 文字行高建议设为和容器等高（如
line-height: 80rpx），避免安卓端文字下沉 - icon 图片宽高必须明确指定（
width: 40rpx; height: 40rpx），否则某些小程序平台会拉伸变形 - 选中态颜色用 class 切换，别用内联 style，否则 H5 端 CSS 优先级易冲突
- 鸿蒙平台需额外适配状态栏高度（
uni.getSystemInfoSync().statusBarHeight），且部分机型不支持var(--window-top)
异步加载分类数据后，tab 栏高度可能动态变化，导致下方内容跳动。务必给容器加 min-height 占位，或用 transition 平滑过渡。真要追求极致体验，还得处理 tab 切换时的页面缓存 —— 用 v-show 替代 v-if，但要注意组件生命周期钩子不会触发，得靠 watch 监听 current 变化来模拟 onShow。
