uni-app小程序状态栏高度适配方案-uni-app-PHP中文网

uni-app小程序中statusbarheight不准，因其仅返回系统状态栏高度（如ios 20–44px），而微信custom导航栏预留空间还包含阴影、内边距及安全区下边界；真机常因刘海屏导致实际占用达88px+，应优先使用onload后获取的env.safearea.top，fallback至statusbarheight。

uni-app小程序状态栏高度适配方案

uni-app小程序里statusBarHeight不准，为什么？

因为 uni.getSystemInfoSync().statusBarHeight 返回的只是系统状态栏本身的高度（iOS 通常 20–44px，安卓多为 24–30px），但微信小程序在 "navigationStyle": "custom" 下预留的顶部空间 ≠ 状态栏高度 —— 它还包含导航栏容器的内边距、阴影、分割线，甚至安全区下边界。真机上常见“内容被遮住几像素”，根源就在这儿。

更麻烦的是，刘海屏/iPhone 15+/部分安卓全面屏机型会把 statusBarHeight 报低（比如报 44，实际占用 88+），而 env.safeArea.top 才是微信注入的真实可用顶部安全距离。

必须等 onLoad 生命周期之后再读取 env，created 或 mounted 阶段 env 还没注入，会是 undefined
H5 端没有 env，要用 CSS env(safe-area-inset-top) 回退
支付宝/ QQ 小程序也支持 env.safeArea，但旧版本需 fallback 到 statusBarHeight

怎么用env.safeArea.top动态设置导航栏高度

核心逻辑：用 env.safeArea.top 作为自定义导航栏的 padding-top 或容器高度基准，它代表从屏幕顶部到安全内容区起始位置的距离，天然兼容刘海屏和折叠屏。

实操时注意三点：

只在小程序平台生效，H5 和 App 端要条件编译隔离，否则会报错
不能直接在 data 中初始化，得在 onLoad 后通过 uni.getEnv() 拿，或监听 uni.onWindowResize（折叠屏展开时可能变化）
如果 env.safeArea 读不到，立刻 fallback 到 uni.getSystemInfoSync().statusBarHeight，别空着

示例片段：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

onLoad() {
  const env = uni.getEnv && uni.getEnv();
  if (env?.safeArea?.top) {
    this.navigationBarTop = env.safeArea.top;
  } else {
    const sys = uni.getSystemInfoSync();
    this.navigationBarTop = sys.statusBarHeight || 25;
  }
}