vist_go_uniApp/components/custom-navbar/custom-navbar.vue

<template>
	<view class="custom-navbar">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 导航栏主体 -->
		<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'custom-navbar',
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 44, // 导航栏高度，单位px
			}
		},
		created() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
		}
	}
</script>

<style>
	.custom-navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: transparent;
	}
	
	.status-bar {
		width: 100%;
		background-color: transparent;
	}
	
	.navbar-content {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: transparent;
	}
</style>