HBuilderX 5.0.7中使用了导航自定义后，顶部没有预留出电量栏的高度，怎么解决？

欢迎到专业群（ HBuilderX技术交流群 ） 咨询，群中有相关专业的管理员和群友。

当在 pages.json 中配置 "navigationStyle": "custom" 后，原生导航栏会隐藏，此时页面内容会占据整个屏幕（包括手机顶部的状态栏区域），导致 H5 页面内容与状态栏（电量栏）重叠。

根据知识库文档，uni-app 提供了 CSS 变量 --status-bar-height 来处理状态栏高度占位问题。解决方案如下：

方法一：使用 CSS 变量添加状态栏占位

在页面模板中添加一个占位 view，高度设置为状态栏高度：

<template>  
  <view>  
    <!-- 状态栏占位 -->  
    <view class="status_bar"></view>  
    <!-- 自定义导航栏或页面内容 -->  
    <view class="content">  
      <!-- 这里放你的 H5 内容 -->  
    </view>  
  </view>  
</template>  

<style>  
  .status_bar {  
    height: var(--status-bar-height);  
    width: 100%;  
  }  
</style>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方法二：动态获取状态栏高度

如需动态获取状态栏高度，可以使用 API：

// 在 onLoad 或 onReady 中获取  
const windowInfo = uni.getWindowInfo();  
const statusBarHeight = windowInfo.statusBarHeight; // 单位 px

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

方法三：使用 uni-ui 的自定义导航栏组件（推荐）

如果不想手动处理状态栏高度，推荐使用 uni-ui 的 NavBar 组件，该组件已自动处理状态栏高度占位问题。

注意事项：

• 不同手机的状态栏高度可能不同，不要使用固定像素值
• 在 App 和 H5 平台，--status-bar-height 会自动返回正确的状态栏高度
• 如果页面需要动态设置状态栏前景色（black/white），仍可设置 navigationBarTextStyle 属性

更多详情可参考官方文档：自定义导航栏使用注意