文章来源：https://www.toymoban.com/news/detail-508322.html
mounted() {
// #ifndef H5 || APP-PLUS || MP-ALIPAY
let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
uni.getSystemInfo({ //获取系统信息
success: res => {
let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
// 导航栏（胶囊）高度
this.titleBarHeight = navHeight;
// 状态栏（顶部）高度
this.statusBarHeight = res.statusBarHeight
console.log(this.titleBarHeight);
console.log(this.statusBarHeight);
},
fail(err) {
console.log(err);
}
})
// #endif
},
uni.getMenuButtonBoundingClientRect() 参考链接
uni.getSystemInfo()参考链接文章来源地址https://www.toymoban.com/news/detail-508322.html
到了这里，关于uniapp 小程序自定义导航栏计算状态栏（顶部）与导航栏（胶囊）高度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
