uni-app h5 单页面自定义头部

1.打开 pages.json 将原生的导航设置为false

		{
			"path": "pages/repair/repair",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			},
			"app-plus": {
				//#ifdef H5
				"titleNView": false
				//#endif
			}

		},

2.页面

<template>
	<view class="content">
		<view class="header">
			<view :style="{ height: top }">头部</view>
		</view>
		<div class="container">
			内容
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				height: 0,
			}
		},
		onLoad() {
			const res = uni.getMenuButtonBoundingClientRect()
			console.log(res)
			this.top = res.top + 'px'
			this.height = res.height + 'px'
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.content {
		font-family: PingFang SC;

		.header {
			background-color: #fff;
            height: 44px;
			.nvebar {
				font-size: 38rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>