uni-app原生tabBar不支持中间凸起，midButton仅App端有效，微信小程序不支持；所有平台必须关闭原生tabBar（彻底删除pages.json中tabBar配置），手写custom-tab-bar组件，通过fixed+absolute定位、安全区适配、手动路由控制实现真凸起。
uni-app 原生 tabBar 不支持中间凸起，midButton 是微信小程序原生配置，uni-app 的 pages.json 中写 midButton 完全无效；所有平台（小程序/H5/App）都必须关闭原生 tabBar，手写自定义组件，否则永远“看起来像但点不中、不同步、iOS 被截、安卓点透”。
为什么 custom: true 后底部还留白或按钮被遮挡
因为 pages.json 里没删干净原生 tabBar 配置。uni-app 在 custom: true 时不会自动清除原生 tabBar 占位，它只是隐藏了渲染层，但仍在 DOM 中撑开约 50px 高度的不可见区域。
- 必须彻底删除或注释掉
pages.json中整个tabBar对象（包括list、color等所有字段） - 检查是否在某个子页面的
page.json里单独写了tabBar，也会触发残留占位 - 真机调试时用 Chrome DevTools 或 vConsole 查看 body 底部是否有高度异常的空白元素，大概率是残留占位
凸起按钮怎么定位才不偏移、不被截、不点不中
不能靠 margin-bottom 或单纯 transform: translateY()，必须组合使用 position: fixed + absolute + 安全区适配，且各端策略不同。
- 外层容器用
position: fixed; bottom: 0; left: 0; right: 0;锚定，高度设为140rpx（比常规高约 90rpx，为凸起留空间） - 中间按钮单独抽离为
position: absolute; bottom: 20rpx; left: 50%; transform: translateX(-50%);，宽高固定如120rpx × 120rpx - iOS 必须加
padding-bottom: env(safe-area-inset-bottom)到外层容器，否则凸起部分被刘海/圆角裁切 - Android 和 H5 不能依赖
env()，需 fallback：H5 监听window.visualViewport?.height变化；Android 可用uni.getSystemInfoSync().safeArea?.bottom动态计算 - 点击区域必须 ≥
120rpx × 120rpx，iOS 上小于该尺寸常被系统判定为“非可交互区域”
点击中间按钮后状态不同步、跳转失败、高亮错乱
自定义 tabBar 完全脱离 uni-app 的路由生命周期，uni.onTabItemTap 不会触发中间按钮，也不管你用 uni.navigateTo 还是 uni.switchTab，一切都要手动接管。
- 中间按钮点击必须调用
uni.switchTab({ url: '/pages/publish' })（仅限 tabBar 页面），若跳非 tabBar 页面（如发布页），需先uni.hideTabBar()，返回时再uni.showTabBar() - 当前激活项不能靠 props 传，必须在每个 tab 页面的
onLoad里执行getCurrentPages()动态读取路径，再匹配list中的pagePath - 不要用
uni.getTabBar()—— H5 返回undefined，App 端多数情况也拿不到实例 - 如果中间按钮是独立功能（如发布），它的点击事件里别调
switchTab，而是直接uni.navigateTo，并手动 emit 一个全局事件通知其他 tab 页面更新 UI 状态
H5 和鸿蒙端最容易忽略的兼容细节
H5 根本不走 custom-tab-bar 生命周期，鸿蒙对 env(safe-area-inset-bottom) 支持极不稳定，这两端的“凸起”最容易在测试后期翻车。
- H5 端要完全放弃
components/custom-tab-bar/index.vue的自动挂载逻辑，改用v-if手动控制显示，并监听uni.$on('routeChange')或window.onpopstate同步当前 tab 索引 - 鸿蒙建议 fallback 到固定值：
padding-bottom: 34rpx（比常规多 4rpx），避免env()返回0导致凸起按钮沉底被截 - 微信小程序 iOS 真机上，
fixed元素在页面滚动时偶发“抖动”，可在凸起按钮上加will-change: transform缓解 - 所有平台的阴影必须用
box-shadow: 0 -10rpx 20rpx rgba(0,0,0,.1)（注意 y 值为负），正数 y 会把阴影压进底部，失去“浮起”感
真正卡住人的不是怎么“画出来”，而是怎么让凸起按钮在 iOS 不被安全区切、在 Android 不被虚拟导航栏吞、在 H5 不随路由丢失状态、在鸿蒙不因 env() 失效而塌陷——这些细节没对齐，视觉再像也是半成品。
