uni-app 中 midButton 不支持背景模糊，所有平台均需手写 fixed 定位组件实现毛玻璃效果；blur 生效需满足 iOS 微信开启 scoped、H5 加 -webkit 前缀、App 启用 WebView 滤镜、容器透明且无 overflow/transform 干扰。
uni-app 里 midButton 不支持背景模糊，必须手写组件
uni-app 的 midButton 配置只在 App 和 H5 有效，小程序端根本不会渲染；更重要的是，它不支持任何 CSS 滤镜（如 backdrop-filter: blur(10px)），连 background 都只能设纯色或图片，更别说毛玻璃效果。所以“带背景模糊的凸起菜单”这件事，所有平台都得放弃原生 tabBar，手写 fixed 定位组件。
blur 效果要生效，必须满足三个硬性条件
很多开发者写了 backdrop-filter: blur(12px) 却看不到效果，不是代码错，而是环境没达标：
- iOS 微信小程序真机必须开启
mp-weixin的styleMode: 'scoped'或关闭 scoped（否则 backdrop-filter 被隔离失效） - H5 端需加
-webkit-backdrop-filter前缀，且父容器不能有overflow: hidden或 transform 层级干扰 - Android App（plus）默认禁用 backdrop-filter，需在
manifest.json → App 设置 → “启用 WebView 原生滤镜”打开（否则直接忽略该样式） - 外层容器必须有透明区域透出下层内容——不能设
background-color: white，得用rgba(255,255,255,0.8)或transparent
示例关键样式：
.tabbar-blur {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 140rpx;
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}中间按钮上浮 + 模糊背景，z-index 和 transform 顺序不能错
模糊背景是整块容器的，但“凸起感”只属于中间按钮本身。如果只给容器加 blur，中间按钮会显得平，必须单独处理层级和位移：
- 中间按钮的
z-index必须 > 其他 tab 项（比如其他是 1，中间设为 99） -
transform: translateY(-32rpx)要写在中间按钮上，不是容器上；否则整个模糊区域被顶起，遮挡页面内容 - 中间按钮自身需加
margin-bottom: 32rpx补齐被上移后留下的空隙，否则页面最底部内容会被遮住 - 按钮内部图标建议用
scale(1.3)配合transition: transform 0.2s做点击反馈，别只靠 blur 变化
安全区适配和真机点击失效是最大坑点
加了模糊后，iOS 真机常出现中间按钮点不中，或点中但无响应——不是逻辑问题，是渲染层叠和点击热区塌陷：
- 务必在中间按钮外层加
style="padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx)"，否则模糊容器底边被刘海/导航栏截断，热区丢失 - Android 虚拟导航栏高度不可预测，不能写死
env(safe-area-inset-bottom)，要用uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().windowHeight动态计算并设置内边距 - 微信小程序里，
backdrop-filter在某些基础库版本（如 2.28.1 以下）完全不生效，需强制降级为半透明白色 + 阴影模拟（box-shadow: 0 -12rpx 24rpx rgba(0,0,0,.1)）作为 fallback - 中间按钮的点击区域必须 ≥ 120rpx × 120rpx，小尺寸图标+文字组合极易触发 iOS 的“点击判定失败”，建议用
padding: 24rpx包裹整个按钮内容
模糊效果本身很轻量，但跨端一致性差、调试成本高。真正上线前，必须在 iOS 微信、Android 微信、App（iOS/Android）、H5 四端逐个验证 blur 是否可见、点击是否精准、滑动时是否闪烁——少一端都可能白做。
