uniapp开发微信小程序取消原生导航栏+自定义导航栏

1、取消原生导航栏

如图：将页面中的原生导航取消

在page.json中需要取消的页面中加入"navigationStyle": "custom"

例如：

{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationStyle": "custom"
		}
},

2、自定义导航栏

<template>
	<view class="maxBox bgc">
		<view :style="{ height: `${statusBarHeight}px` }" class='status' />
		<view :style="{ height: `${barHeight}px`}" class="header">
			<text>{{enterpriseName}}</text>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	/* ---------------------------生命周期----------------------- */
	onLoad(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height + (top - statusBarHeight.value) * 2;
	})
	/* ---------------------------接口数据----------------------- */

	/* ---------------------------变量声明----------------------- */
	const statusBarHeight = ref(0); //状态栏高度
	const barHeight = ref(0); //高度

</script>

<style lang="scss" scoped>
	.maxBox {
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;

		.status {
			background-color: #023D8D;
		}

		.header {
			background-color: #023D8D;
			color: #E8FBFE;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			padding-left: 3vw;
		}
	}
</style>