uni-app 中实现带背景模糊的自定义中间按钮 TabBar，必须放弃原生 tabBar，改用自定义组件 + backdrop-filter + 底部安全区适配。原生 tabBar 的 blurEffect 不支持中间凸起按钮、自定义跳转及双端兼容；自定义方案需 fixed 定位、动态高度、padding 占位、!important 样式、绝对定位凸起按钮及双端降级处理。
直接上结论：uni-app 里实现「带背景模糊的自定义中间按钮 TabBar」，必须放弃原生 tabBar，改用自定义组件 + backdrop-filter + 底部安全区适配，三者缺一不可。单纯靠 pages.json 配置或只加 blur 样式，一定会糊掉内容、遮挡按钮、或在 iOS 上被安全区切掉。
为什么不能用原生 tabBar 的 blurEffect 配置
uni-app 官方文档里写的 blurEffect（如 "extralight"）仅对「原生 tabBar」生效，但它有硬性限制：
- 不支持中间凸起按钮 —— 所有 tab 项强制等宽、居中对齐，无法单独放大/抬高某个 item
- 不支持自定义点击逻辑 —— 中间按钮要跳转非 tabBar 页面（比如发布页），
uni.switchTab会失败 - 模糊区域固定覆盖整个 tabBar 高度，无法和自定义按钮的阴影、圆角、z-index 精确配合
- Android 端基本无效，
backdrop-filter在 WebView 内核中兼容性极差，必须手动 fallback
自定义组件里怎么加高斯模糊背景
核心是用 backdrop-filter: blur(10px) + 半透明白色/黑色背景，但必须满足两个前提：
- 父容器需启用
position: fixed; bottom: 0;，且高度明确（推荐用uni.getSystemInfoSync().windowBottom动态获取） - 页面主体内容必须预留底部占位（例如加一个
padding-bottom: 60px的<view class="u-blur-effect-inset"></view>），否则模糊层会盖住最后一行文字 - 样式必须带
!important，因为 uni-app 框架内联样式优先级高，background-color: rgba(255,255,255,.32) !important;和backdrop-filter: blur(10px) !important;缺一不可
示例关键 CSS：
.custom-tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px; /* 必须与 windowBottom 一致 */
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(255, 255, 255, 0.32) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-top: 1px solid rgba(0,0,0,0.05);
z-index: 999;
}中间按钮怎么凸起又不遮挡其他 tab
凸起效果不是靠 margin-top，而是靠「绝对定位 + 负 margin + 阴影」组合，同时避免触发 iOS 安全区裁剪：
- 中间按钮用
position: absolute; top: -20px;抬起，宽度设为80px，左右留白靠 flex 自动分配 - 给它加
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);模拟悬浮感，iOS 上比transform: translateY(-20px)更稳定 - 务必用
z-index: 1000确保压在左右 tab 项之上，但不要超过 9999，否则可能干扰 popup 或 toast - 在
App.vue的onShow里调用uni.hideTabBar({animation: false})，防止原生 tabBar 闪一下再消失
容易被忽略的双端兼容细节
这个功能最常翻车的地方不在写法，而在运行时环境判断：
- iOS 需要额外处理安全区：用
uni.getSystemInfoSync().safeAreaInsets.bottom判断是否 > 0，动态增加padding-bottom，否则凸起按钮底部会被刘海遮住 - Android 必须提供
backdrop-filter的降级方案：检测不支持时，改用浅色半透明背景 + 微弱阴影，别硬撑 blur - 微信小程序真机调试时，
backdrop-filter默认关闭，需在project.config.json加"libVersion": "3.0.0"并开启「实验性能力」 - 页面切换后状态不同步？在自定义 tabBar 组件里监听
uni.onTabItemTap，并用watch: $route或onPageScroll主动同步 activeIndex
真正麻烦的从来不是加个 blur，而是让模糊刚好框住按钮、不糊文字、不挡操作、不被系统切掉 —— 这些边界条件得一个个对着真机调。
