uniapp自定义头部导航

在page.js里加入以下开启头部自定义

"navigationStyle": "custom"

//完整路由代码
		{
			"path" : "pages/detail/xjsb/Report/Report",
			"style" : 
			{
				"navigationStyle": "custom"
			}
		}

但是不同的机型顶部导航的高度各不相同，所以得适配，完整适配代码如下

<template>
	<view>
		<view class="navTop" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
			<view class="left" @click="goReturn">
				<i class="uni-btn-icon" ></i>
			</view>
			<view class="center">
				巡检上报
			</view>
			<view>
				<image class="imgs" src="@/static/image/erweima.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				navHeight: "", // 导航栏高度
				statusBarHeight: '', // 状态栏高度
			}
		},
		onLoad() {

			//获取手机系统的信息 里面有状态栏高度和设备型号
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			// 注意返回的单位是px 不是rpx
			console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
			this.statusBarHeight = statusBarHeight
			// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
			// 这个高度刚好和胶囊对齐
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
			console.log(this.navHeight, "导航栏高度");
		},
		methods: {
			goReturn(){
				
			}
		}
	}
</script>

<style>
	.navTop {
		background-color: #0078FF;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40rpx;
	}
	.left{
		margin-left: 20rpx;
	}
	.imgs{
		width: 44rpx;
		height: 44rpx;
		margin-right: 20rpx;
	}
	.uni-btn-icon{
		color: white; 
		
		font-size: 54rpx;
	}
</style>