realty/virgo.wzfrontend/yui_wx/components/common/navbar.vue

<template>
	<view class="navbar">
		<!-- 状态栏高度 -->
		<view class="status-bar" :style="{'height': geStatusBarHeight() + 'px'}"></view>
		<!-- 导航栏高度 -->
		<view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Navbar',
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},
			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 2
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return navbarHeight
			},
			navigateBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1996;

		.status-bar {
			background: #fff;
		}

		.bar-content {
			position: relative;
		}
	}
</style>