<!-- 导航栏 -->
		<ChildNav  style="width: 100%;">
			<template v-slot:barContent>人像抠图</template>
		</ChildNav>

		<template>
	<view class="navBarBox">


		<!-- 占位 -->
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<view style="height: 82upx;padding: 3upx 50upx;padding-bottom: 8upx;"></view>

      <!-- 状态栏 -->
      		<view class="fixStyle">
      			<view :style="{ height: statusBarHeight + 'px' }"></view>
      			<!-- 真正的导航栏内容 -->
      			<view class="navBar">
				<image @tap="toback" src="../static/icon/back.png" mode="widthFix"></image>
				<slot name="barContent"></slot>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			toback() {
				uni.navigateBack();
			}
		}
	}
</script>

上面是自定义导航栏组件的代码

想要实现这样的