效果图

 

 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>