必须关闭原生 tabBar 才能实现中间图标放大，操作包括：删除 pages.json 中整个 tabBar 对象、新建 custom-tabbar.vue 自定义组件、用 absolute 定位中间按钮并处理安全区与真机兼容性。
原生 tabBar 的中间图标根本不能单独放大
uni-app 的原生 tabBar 在微信/支付宝小程序中**不支持 midButton 配置**，pages.json 里加了也无效。所谓“用 :nth-last-child(3) 改中间图标”，只在 H5 有概率生效，App 和小程序里完全匹配不到对应 DOM——因为原生 tabBar 是由平台原生控件渲染的，不是 Vue 模板生成的节点。
想让中间图标凸起或变大，必须关掉原生 tabBar
这是唯一可靠路径。操作分三步：
- 删掉
pages.json中整个tabBar对象（不是只设"custom": true，否则会残留 50px 不可见占位层） - 新建自定义组件（如
custom-tabbar.vue），用<view>+<image>+v-for渲染所有 tab 项 - 把中间按钮抽成独立
<view class="tabbar-float-btn">，用position: absolute定位：底部固定容器设position: fixed; bottom: 0;，中间按钮设bottom: 20rpx; left: 50%; transform: translateX(-50%);
中间图标高度控制的关键细节
自定义模式下，图标的实际显示高度受三重影响：
-
<image>标签本身：设height: 70rpx; width: 70rpx;（推荐 rpx，避免 iOS/Android 缩放不一致） - 父容器
.tabbar-item：需设flex: 1; display: flex; align-items: center; justify-content: center;，否则图片会被拉伸或裁剪 - 安全区适配：容器整体加
padding-bottom: env(safe-area-inset-bottom, 34rpx);，鸿蒙端 fallback 到34rpx，否则凸起按钮可能被圆角截断
容易被忽略的真机陷阱
安卓部分机型 bottom 值计算不准，iOS 滚动时 position: fixed 可能闪烁——必须给凸起按钮容器加 transform: translateZ(0); 强制 GPU 加速。另外，uni.switchTab() 在 custom 模式下对未注册页静默失败，跳转逻辑得用 uni.reLaunch() 或手动查页栈判断。
