解决 uni-app 编译到微信小程序后自定义导航栏高度计算错误，需要在 pages.json 中配置 navigationStyle 为 custom，并通过 uni.getSystemInfo 动态获取状态栏高度与胶囊按钮位置进行计算。

快速处理思路

无需复杂命令，重点在于配置文件修改与动态样式计算。在页面配置中关闭原生导航，在脚本中获取系统信息，在样式中应用计算后的高度。

// pages.json 中目标页面配置
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom"
  }
}

// 脚本中获取高度示例
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
// 胶囊按钮信息需通过 wx 接口获取（微信小程序环境）
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

为什么会这样

根本原因是开启自定义导航后原生导航栏被隐藏，但状态栏依然保留，导致内容区域上移被遮挡。uni-app 编译到微信小程序时，若设置 navigationStyle 为 custom，微信客户端会隐藏标题栏，但不会自动扣除状态栏高度。开发者需要手动预留状态栏高度，并根据胶囊按钮位置确定导航栏总高度，否则会出现内容顶格或高度计算偏差。

分步处理

按以下顺序修改配置、计算高度并应用样式，每一步完成后检查页面表现。

步骤 1：修改页面配置
打开项目的 pages.json 文件，找到需要自定义导航的页面对象，在 style 属性中添加 navigationStyle 字段。确保值为 custom，保存后重新编译。

步骤 2：获取系统信息
在页面的 script 生命周期中，调用 uni.getSystemInfoSync 获取 statusBarHeight。在微信小程序环境下，额外调用 wx.getMenuButtonBoundingClientRect 获取胶囊按钮的顶部位置和高度。注意此接口仅在微信小程序端有效，其他端需做兼容性判断。

步骤 3：应用动态样式
将计算出的总高度绑定到自定义导航栏容器的 style 中。建议使用 CSS 变量存储高度值，便于全局统一修改。确保容器 padding-top 至少等于状态栏高度，避免内容被状态栏遮挡。

步骤 4：处理回滚
若修改后出现布局错乱，先将 navigationStyle 改回 default 确认是否为自定义导致。检查是否在所有端都调用了微信小程序特有接口，避免 H5 或 App 端报错。

怎么验证是否生效

使用微信开发者工具的真机调试功能，选择不同型号的 iOS 和 Android 设备查看效果。重点观察状态栏文字是否被内容遮挡，自定义导航栏是否与胶囊按钮水平对齐。切换应用前后背景，检查导航栏区域是否有透明漏底现象。公开资料中没有看到可靠的量化数据表明具体像素值，因此必须通过真机视觉确认。

常见坑

1. H5 端兼容性：wx.getMenuButtonBoundingClientRect 在 H5 端不存在，调用前必须判断平台，否则会导致脚本中断。
2. 安全区域适配：iPhone X 及以上机型底部安全区域需单独处理，避免底部内容被 Home 条遮挡。
3. 导航栏标题重叠：自定义导航栏后需手动实现标题逻辑，否则页面没有标题显示。
4. 状态栏颜色：自定义导航栏后，状态栏文字颜色可能不会自动随背景变化，需通过 setNavigationBarColor 接口调整。

常见问题

为什么设置了 custom 状态栏还是遮挡内容？

因为 custom 仅隐藏标题栏，不隐藏状态栏，需要在容器顶部增加 padding-top 补偿状态栏高度。

胶囊按钮位置获取不到怎么办？

该接口仅在微信小程序环境有效，H5 或 App 端需隐藏自定义胶囊逻辑或使用条件编译区分平台。

不同手机导航栏高度不一致怎么统一？

不要使用固定像素，必须动态获取 statusBarHeight 和胶囊按钮信息计算实时高度。

参考来源

• uni-app 官方文档 - 页面配置：https://uniapp.dcloud.net.cn/collocation/pages.html
• 微信小程序官方文档 - 系统信息：https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info.html