5***@qq.com
5***@qq.com
  • 发布:2026-10-14 10:06
  • 更新:2026-10-14 10:07
  • 阅读:56

uniapp app获取导航栏高度,不是状态栏

分类:uni-app

uniapp app如何获取导航栏高度,不是状态栏

2026-10-14 10:06 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

在 uni-app 的 App 端(安卓和 iOS),获取原生导航栏高度(不包含状态栏)有以下几种方法:

  1. 使用 uni.getSystemInfoSync().windowTop 获取
    在 App 端,windowTop 等于透明状态 NavigationBar 高度,可以直接获取到原生导航栏的高度。

    const sysInfo = uni.getSystemInfoSync();  
    const navBarHeight = sysInfo.windowTop;

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
    参考来源:DCloud问答_144991

  2. 通过固定值计算
    根据官方文档和社区经验,原生导航栏高度有固定标准:

    • iOS:导航栏高度为 44px(不含状态栏)。
    • Android:导航栏高度通常为 48px(不含状态栏)。

你可以结合 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后根据平台加上对应的导航栏高度。

const sysInfo = uni.getSystemInfoSync();  
const statusBarHeight = sysInfo.statusBarHeight;  
let navBarHeight = 0;  
if (sysInfo.platform === 'android') {  
    navBarHeight = 48;  
} else if (sysInfo.platform === 'ios') {  
    navBarHeight = 44;  
}  
const totalHeight = statusBarHeight + navBarHeight;

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
参考来源:pages.json 页面路由、DCloud文章_36183

注意事项:
获取高度相关信息时,建议放在 onReady 生命周期中,太早可能取不到准确值。参考来源:uni.getSystemInfo(OBJECT)

内容为 AI 生成,仅供参考

要回复问题请先登录或注册