uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px？

原创已于 2025-08-01 10:21:55 修改 · 461 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

于 2025-07-28 16:32:37 首次发布

/** 原生NavigationBar的高度 (默认44px) */
const nativeNavigationBarH = 44;
let getNativePageHeaderH = function(statusBarHeight) {
  // // #ifdef MP-WEIXIN
  // /* 
  //  * 获取胶囊按钮的位置信息( width、height、top、right、left、bottom ) 。
  //  * 胶囊按钮在导航栏中是垂直居中的，它距离导航栏顶部和底部是一样的。由此我们可以推导出计算公式：
  //  * (1) 导航栏高度 = 按钮高度 + ((顶部距离 - 状态栏高度) x 2) 。
  //  * (2) 头部高度 = 导航栏高度 + 状态栏高度 。
  //  * 注意：计算出来的导航栏高度是40px [ 为什么不是44px呢? ] 。
  //  */
  // const res = uni.getMenuButtonBoundingClientRect();
  // if (undefined === statusBarHeight) {
  //   statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  // }
  // const navH = res.height + (res.top - statusBarHeight) * 2;
  // const pageHeaderH = navH + res.statusBarHeight;
  // return pageHeaderH;
  // // #endif
  return ((statusBarHeight ?? uni.getSystemInfoSync().statusBarHeight) + nativeNavigationBarH);
}

计算出来的导航栏高度为什么是40px却不是44px？毕竟，标准的导航栏高度是44px。

难道是这里忽略了阴影、边框、内边距或者外边距？

参考文章：如何在uni-app中计算出微信小程序导航栏的高度