uniapp自定义导航头部

<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<!-- 以下定义导航栏的样式 -->
				<!-- <view class="left">
					<text>消息</text>
					<text>课群</text>
				</view> -->
			</view>
		</view>
		<!-- 页面内容 -->
		<view>我是页面内容</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
			};
		},
		props: {
			
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
	}
</script>

<style lang="scss">
.navBarBox{
	.statusBar{
		background-color: $system-blue ;
	}
	.navBar {
		background-color: $system-blue;
		padding: 3rpx 20rpx 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 93rpx;
		line-height: 93rpx;
		justify-content: space-between;
	}
}
</style>