midbutton跨端不可用，必须关闭原生tabbar并手写custom-tab-bar；需满足pages.json设"custom":true、根目录存在components/custom-tab-bar/index.vue、所有tab页page.json加"disablescroll":true三大条件。
不能只改 pages.json 里的 midButton 就完事——它在 H5 端不生效、小程序基础库低于 2.24.4 会白屏、App 端根本无视该配置；真要跨端稳定，必须关原生 tabBar、手写 custom-tab-bar，否则凸起按钮不是错位就是点不中。
为什么 midButton 在多数项目里不能用
midButton 是 uni-app 官方文档里写的“支持”配置，但实际运行环境差异极大：
- H5 端完全不识别
midButton字段，渲染时直接忽略，底部还是平的 - 微信小程序要求基础库 ≥ 2.24.4 才能解析，低于此版本会整个 tabBar 渲染失败（白屏）
- App 端（
app-plus）压根不读midButton，即使写了也当没写 - 它没有
pagePath，点击后必须手动监听uni.onTabItemTap并调uni.switchTab，否则跳转失效
custom-tab-bar 必须满足的三个硬性条件
只要漏掉任意一个，组件就不会加载，或在 iOS 上被顶穿、H5 上消失：
- 在
pages.json的tabBar节点下写"custom": true，不能写在其他位置，也不能加引号变成字符串 - 根目录下必须存在
components/custom-tab-bar/index.vue，路径和文件名一个字母都不能错（大小写敏感） - 所有 tabBar 页面（即
tabBar.list里声明的页面）的page.json中必须加"disableScroll": true，否则 iOS 滚动时会把自定义 tabBar 顶上去
中间按钮定位必须同时满足四条规则
只靠 transform: translateY(-20px) 或 margin-bottom 会导致 H5 塌陷、Android 遮挡、iOS 被安全区切掉：
- 用
position: fixed; bottom: 0;锚定，不要塞进 flex 容器里 -
z-index至少设为999，否则部分 Android 机型系统导航栏会盖住按钮 - iOS 必须加
padding-bottom: env(safe-area-inset-bottom)，否则 Home Indicator 会截断按钮下半部分 - 按钮宽高必须显式设置，如
width: 100rpx; height: 100rpx;，不能靠内容撑开，否则不同设备缩放失真
backdrop-filter 模糊背景不能直接套用
backdrop-filter: blur(10px) 在 H5 和低版本小程序里默认不生效，且 uni-app 原生 tabBar 的模糊机制和自定义组件互不感知：
- TabBar 容器层要同时设
background-color: rgba(255, 255, 255, 0.32)+backdrop-filter: blur(10px) - 页面最外层
<view></view>必须加 class（如u-blur-effect-inset），并动态注入高度值：uni.getSystemInfoSync().windowBottom获取实际 tabBar 高度 - 禁止给 TabBar 容器设纯色
backgroundColor，否则模糊无内容可透出，等于没加
真正麻烦的不是写代码，而是每个平台都要单独验证：iOS 安全区、Android z-index 层叠顺序、H5 视口滚动劫持、小程序基础库兼容性——这些细节一旦漏测，上线后用户看到的就是错位按钮或点不动的图标。
