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>