zdxtDrillProgram/components/navigation/navigation.vue

<template>
	<view class="header" :style="{top: height}">
		<label v-if="isBack" class="back" @click="back()"></label>
		<label v-else class="noback"></label>
		<view class="title">{{title}}</view>
	</view>
</template>

<script>
	export default {
		name:"navigation",
		data() {
			return {
				height: 0,
			};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			isBack: {
				type: Boolean,
				default: true
			}
		},
		created() {
			this.getWXStatusHeight();
		},
		methods: {
			getWXStatusHeight() {
				//获取状态栏高度
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//获取小程序胶囊信息
				const menu = uni.getMenuButtonBoundingClientRect()
				//导航栏高度 == （胶囊距顶部高度-状态栏高度） *2 +胶囊高度
				const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height
				//头部整体高度 ==状态栏高度 + 导航栏高度
				const headerHeight = statusBarHeight + navBarHeightWechat
				//计算导航内容距离顶部高度= 状态栏高度/2
				const topHeight = statusBarHeight / 2
				this.height = headerHeight - (topHeight/2) +"rpx"
		   },
			back(){
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			}
		}
	}
</script>

<style>
.header {
	position: relative;
	z-index: 99;
	top: 90rpx;
	width: 100%;
	height: 90rpx;
	background-color: #bac6fc;
}

label.back {
	display: inline-block;
	position: relative;
	top: 16rpx;
	left: 4%;
	padding-left: 1.25rem;
	width: 60rpx;
	height: 60rpx;
	background: url(/static/images/icon_arb.png) no-repeat left center;
	background-size: auto 60%;
}

label.noback {
	display: inline-block;
	position: relative;
	top: 16rpx;
	left: 4%;
	padding-left: 1.25rem;
	width: 60rpx;
	height: 60rpx;
	background-size: auto 60%;
}

.title {
	margin: -54rpx 0 50rpx;
	color: #333;
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
}
</style>