当前位置：首页 > backend >正文

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

backend 2025/7/29 10:20:34

/** 原生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;// // #endifreturn ((statusBarHeight ?? uni.getSystemInfoSync().statusBarHeight) + nativeNavigationBarH);
}

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

难道是因为边框或者其他原因！

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

查看全文

http://www.xdnf.cn/news/16486.html