uni-app 顶部导航栏高度计算 + 胶囊高度计算

uni-app

uni-app中使用自定义导航栏

page.json中设置

"navigationStyle": "custom",

// 消息模块
		{
			"path": "pages/news/news",
			"style": {
				// "navigationBarTitleText": "消息",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"usingComponents": {
					"van-swipe-cell": "/wxcomponents/vant-weapp/swipe-cell/index"
				}
			}
		},

一、顶部导航栏高度计算

onLoad() {
			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf('iPhone') > -1) {
				this.statusBarHeight += 4
			}
		},

是否需要加上4，需要判断手机的系统

二、胶囊高度计算

// 获取导航栏高度
getSystemStatus() {
setTimeout(() => {
uni.getSystemInfo({
success: function(res) {
let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
console.log('下至'+menu.bottom,'上至'+menu.top,'这个？'+res.statusBarHeight)
console.log(menu.bottom + menu.top - res.statusBarHeight,'看下参数')

}
});
})
},

总结

uni-app中自定义导航栏