微信小程序(uniApp)：自定义头部

wxml

<view 
		class='header-wrap'
		:style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
		<view class="header-title">
			{{headerData.title}}
		</view>
</view>

wxss

.header-wrap{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	.header-title{
		font-size: 34upx;
		font-weight: 800;
		color: #000;
	}
}

js(重点部分)
思路如下：
1.获取系统信息 =》 得知statusBar高度
2.获取胶囊信息 =》 得知胶囊距离顶部距离 =》 胶囊距离顶部距离 - statusBar高度 = 胶囊距离statusBar距离
3.自定义头部高度 = 胶囊距离statusBar距离 + 胶囊本身的高度

uni.getSystemInfo({
	success: (res) => {
		const menuButton = uni.getMenuButtonBoundingClientRect()		// 胶囊
		const navBarPadding = (menuButton.top - res.statusBarHeight) * 2	
		let statusBarHeight = res.statusBarHeight
		let navHeight = menuButton.height + navBarPadding		
		let headerHeight = navHeight + statusBarHeight
		.... // 以下为页面赋值部分省略
	}
})