uniapp写的微信小程序自定义导航栏

组件代码：

<template>
	<block>
		<view class="BanContain">
			<view class="status_bar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="navBar" :style="{height:titleBarHeight+'px'}">
				<image class="back-img" src="" mode="" @click="backPre"></image>
				<text class="bans-title">
					<slot></slot>
				</text>
			</view>
		</view>
	</block>
		
	
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				titleBarHeight: 0,
			}
		},
		methods: {
			backPre() {
				uni.navigateBack()
			},
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		},
	}
</script>

<style>
.bans-title{
	text-align: center;
	margin-left: 222rpx;
	color: #fff;
}
	.BanContain{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.back-img{
		width: 34px;
		height: 34px;
		margin-left: 18rpx;
	}
.navBar {
		display: flex;
		align-items: center;
		/* padding-bottom: 10rpx; */
		background-color: #21A675;
	}
	.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			background-color: #21A675;
		}
</style>

在页面使用：
1.引入： import bans from “…/components/bans/bans.vue”
2.注册：components: {
bans
},
3.标签使用：标题
4.整体页面顶部占用的空间：
5.页面上获取屏幕信息：

mounted() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		}