uniapp自定义头部，计算状态栏和导航栏高度超简单三步

 效果图

 

 1.pages.json 页面给要自定义头部的页面加入一行代码 "navigationStyle":"custom"

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "",
		"navigationStyle":"custom"  //自定义头部去掉默认头部导航
    }
},

 2.页面js代码（和onLoad同级） tops是状态栏的高度  height是导航栏的高度

onReady() {
	uni.getSystemInfo({
		success: (e) => {
			this.tops = e.statusBarHeight;
			let custom = uni.getMenuButtonBoundingClientRect();
			this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
		}
	})
},

3.页面代码

<view>
	<view :style="{'height':tops+'px'}"></view>
	<view :style="{'height':height+'px'}">
		里面写返回箭头和标题 通过盒子布局flex可以进行标题居中
	</view>
</view>