uniapp passt den Header an und berechnet die Höhe der Statusleiste und der Navigationsleiste in drei einfachen Schritten

 Darstellungen

 

 1. Die Seite „pages.json“ fügt der Seite eine Codezeile  „navigationStyle“: „custom“ hinzu, um den Header anzupassen

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

 2. Seiten-JS-Code (gleiche Ebene wie onLoad) tops ist die Höhe der Statusleiste und height ist die Höhe der Navigationsleiste

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

3. Seitencode

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