uni-app 中如何正确适配不同平台的导航栏高度？

慕容紫瑶提问于 2026-03-06 06:17:19 阅读 4

移动

我在用 uni-app 开发一个多端项目，发现 iOS、Android 和 H5 的导航栏高度都不一样。尝试用 uni.getSystemInfoSync() 获取状态栏高度，但组合起来还是对不齐。比如在 H5 上多出一截空白，在小程序里又盖住内容了。

目前我是这样写的：

const sys = uni.getSystemInfoSync();
const navHeight = sys.statusBarHeight + 44; // 假设导航栏是44px
this.navTop = navHeight + 'px';

但实际效果很不稳定，有没有统一的方案或者官方推荐的适配方式？是不是应该用 uni.getMenuButtonBoundingClientRect() 来计算？

多端适配

我来解答赞 5 收藏

反馈

1 条解答

司马梓轩 Lv1

哎这个坑我踩过，调了一整天差点没崩溃。关键点在于不同平台的导航栏组成不一样，不能简单用固定值44来算。

正确的姿势是要区分处理：
1. 小程序用uni.getMenuButtonBoundingClientRect()获取胶囊按钮信息
2. H5直接用uni.getSystemInfoSync().statusBarHeight加个固定值
3. App端要考虑状态栏和标题栏两部分

我最后用的方案是这样的：

function getNavBarHeight() {

  const sys = uni.getSystemInfoSync()

  let navHeight = 0

  // #ifdef H5

  navHeight = sys.statusBarHeight + 44

  // #endif

  

  // #ifdef MP-WEIXIN

  const menuBtn = uni.getMenuButtonBoundingClientRect()

  navHeight = menuBtn.bottom + menuBtn.top - sys.statusBarHeight

  // #endif

  

  // #ifdef APP-PLUS

  navHeight = sys.statusBarHeight + 44

  // #endif

  

  return navHeight

}

血泪教训：千万不要在H5用小程序那套计算方式，否则会出现诡异的空白。还有记得用条件编译区分平台，这玩意跨平台不统一就是坑爹。

实际用的时候把这个高度赋给页面容器的padding-top就行，别用margin，我遇到过滚动穿透的问题。

2026-03-06 07:02