uni-app tabBar高斯模糊必须用原生配置，仅支持小程序和App端，H5不支持；需禁用custom:true，且blurEffect与midButton互斥，可行方案是原生tabBar加浮层按钮。
uni-app 的 tabBar 高斯模糊必须用原生配置，不能手写
想用 CSS backdrop-filter 或 JS 模拟模糊？别试了。uni-app 的高斯模糊效果只在启用原生 tabBar 且开启 blurEffect 时生效，且仅限小程序（微信/支付宝等）和 App 端，H5 不支持。它不是加个 class 就能触发的样式，而是框架在 tabBar 区域上方叠加一层原生模糊视图层。
关键前提：你必须放弃 custom: true，否则模糊直接失效——因为自定义 tabBar 是纯 WebView 渲染，没有原生层可叠加模糊。所以“自定义中间凸起 + 背景模糊”本质上是个矛盾需求：要模糊就得用原生 tabBar，但原生 tabBar 又不支持中间凸起。
- pages.json 中设置
"tabBar": { "blurEffect": "dark" }或"light"，同时删掉"custom": true -
blurEffect会自动拉高 tabBar 区域高度（通常多出 20–30px），页面内容会自然延伸到 tabBar 下方，被模糊层覆盖 - 不能设
backgroundColor为不透明色，否则模糊不可见；推荐用"backgroundColor": "rgba(255,255,255,0.8)" - 模糊仅作用于 tabBar 下方的内容区域，对中间按钮本身无影响——也就是说，你无法让凸起按钮自带模糊边框或背景
想实现“凸起+模糊”，只能分层处理
真正可行的方案是：用原生 tabBar 实现模糊背景，再在其上方叠一个独立的、带凸起视觉的按钮组件——它不属于 tabBar，只是 UI 层级上“看起来在 tabBar 上面”。这要求严格控制 z-index 和定位锚点。
- 先启用原生 tabBar 并开启
blurEffect，确保底部有模糊效果 - 在 App.vue 或每个 tab 页面的根节点里，用
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%)定位中间按钮 - 按钮的
z-index必须高于 tabBar 原生层（实测微信小程序需 ≥ 999，iOS App 可能需更高） - 按钮自身不参与 tabBar 路由，点击时调用
uni.switchTab({ url: '/pages/publish/publish' })，并手动触发状态同步逻辑 - 注意安全区：iOS 需读取
env(safe-area-inset-bottom)动态计算 bottom 值，Android 则建议 fallback 到固定值（如bottom: 10rpx）
midButton 和 blurEffect 不能共存
midButton 是 uni-app 提供的原生中间按钮能力，但它和 blurEffect 在同一份 tabBar 配置中互斥。官方文档未明说，但实测发现：只要配置了 midButton，blurEffect 就失效——框架内部会降级为普通非模糊渲染。
- 如果你必须用
midButton（比如追求最小代码量、兼容性优先），就放弃模糊，改用阴影模拟悬浮感：box-shadow: 0 -12rpx 24rpx rgba(0,0,0,.12) - 如果设计稿强制要求模糊（如 iOS 系统级通透感），那就得舍弃
midButton，走“原生 tabBar + 浮层按钮”路线 - 不要试图在
midButton的backgroundImage里塞模糊纹理图——它会被原生层裁剪，且不同机型缩放失真严重
真机调试最容易忽略的三个点
模糊和凸起在开发工具里看着正常，一上真机就错位或消失，大概率卡在这三处：
- iOS 上
env(safe-area-inset-bottom)在某些微信版本返回0，要用getSystemInfoSync().safeAreaInsets.bottom做 fallback - 浮层按钮的点击区域必须 ≥ 120rpx × 120rpx，尤其在 iPhone SE 这类小屏设备上，小于这个值 iOS 会判定为无效点击
- App 端首次启动时，
uni.getSystemInfoSync()可能拿不到安全区数据，需要在onReady后延时 100ms 再计算位置
模糊不是装饰，是渲染层级；凸起不是尺寸，是 z-index 和 transform 的配合。两者硬凑在一起，不如拆成“底层模糊 + 上层凸起”的两层结构来得稳。
