uni-app TabBar 中间按钮“突出显示”应优先使用官方 midButton 属性实现原生凸起效果，而非手写 fixed + transform；需在 pages.json 中与 tabBar.list 同级配置，设置 height ≥ 100rpx、iconWidth ≥ 64rpx，并通过 uni.onTabItemTap 手动处理跳转。
uni-app 的 TabBar 中间按钮“突出显示”，本质是视觉凸起（悬浮感），不是单纯加粗文字或改颜色。官方 midButton 属性才是正确起点，别一上来就手写 fixed + transform —— 那是兜底方案，不是首选。
用 midButton 实现原生凸起（H5/小程序通用）
这是最简、最稳、跨端一致性最好的方式。uni-app 自 3.2.0+ 已完整支持 midButton，无需 custom 组件、不依赖 CSS 定位，直接在 pages.json 配置即可生效：
-
midButton必须和tabBar.list同级，不能嵌套在 list 里 -
height是关键：设为100rpx或更高（其他 tab 默认约 50–60rpx），高度差直接产生凸起错觉 -
iconPath和iconWidth控制图标大小，iconWidth建议 ≥ 64rpx，太小 iOS 点击易失焦 - 它没有
pagePath，点击事件需手动监听：uni.onTabItemTap回调中判断index === 2（假设中间是第 3 项）再跳转 - H5 端会自动 fallback 为普通按钮，但依然保持位置和尺寸，不崩 layout
为什么 midButton 比自定义组件更可靠
自定义方案常在真机上翻车，核心问题不是写法不对，而是平台行为不可控：
- iOS 微信小程序：fixed 元素在某些 scroll-view 下被裁剪，
transform: translateY(-30rpx)后点击区域失效，报错touchstart not dispatched - Android App：虚拟导航栏高度浮动，写死
env(safe-area-inset-bottom)在部分机型返回 0，导致凸起按钮压住内容 - H5 端：
position: fixed底部栏在 Safari 横屏时错位，且无法响应resize事件自动修正 - 所有平台：自定义 tabBar 无法触发
onTabItemTap生命周期，状态同步全靠手工维护，uni.reLaunch后 current 值丢失是高频 bug
如果必须手写自定义 tabBar（比如要加动画或特殊反馈）
那得绕过所有“看起来像凸起”的陷阱，直击渲染层逻辑：
- 删掉
pages.json中整个tabBar配置，只留"custom": true，否则原生占位会残留空白 - 中间按钮容器必须用
position: absolute脱离文档流，不能用margin-top或padding撑开 -
z-index至少设为999，左右 tab 项 z-index ≤ 10，否则阴影会被遮盖 - box-shadow 必须用负 y 值：
box-shadow: 0 -8rpx 16rpx rgba(0,0,0,.12)，正数 y 是“往下掉”，不是“往上浮” - 中间按钮宽高建议固定值（如
120rpx × 120rpx），不用 % 或 vw，避免缩放后点击热区变形
真正容易被忽略的点是：midButton 的点击回调不自动触发页面跳转，你得自己 uni.switchTab 或 uni.navigateTo，而且非 tabBar 页面（如发布页）必须先 uni.hideTabBar()，否则在 iOS 上会出现底部双栏重叠。这个逻辑藏在事件监听里，而不是样式里。
