uniapp小程序自定义头部标题兼容手机

<view 
class='header-wrap'
	:style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
	<view class="goback" @click="goback()" :style="{height: navHeight + 'px'}">
		<image src="http://yunvjia.oss-accelerate.aliyuncs.com/news/2021/7/30/qp53i21627630137042.png" mode="">
			
		</image>
	</view>
	<view class="header-title">
			标题
	</view>
</view>

data() {
	return {
		navHeight:'',
		statusBarHeight:''
	}
},
onLoad() {
	// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			// 除了h5 app mp-alipay的情况下执行
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
			console.log(this.navHeight)
}

.header-wrap{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: #7BCFC2;
	.goback{
		font-size: 34upx;
		font-weight: 800;
		color: #FFFFFF;
		width: 100rpx;
		position: fixed;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 20rpx;
			height: 40rpx;
		}
	}
	.header-title{
		font-size: 34upx;
		font-weight: 800;
		color: #FFFFFF;
	}
}