weapp-v2/components/custom-nav.vue

<template>
	<view class="header" :style="style">
		<view class="flexbox"
			:style="[{'height': customBarH + 'px', 'line-height': customBarH + 'px','padding-top': statusBarH + 'px', 'color': statusBarColor, 'background': bgColor}]" @tap="showBack?back():''">
			<text v-if="showBack" class="back cuIcon-back"></text>
			<text class="title">{{ title }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarH: 0,
				customBarH: 0
			}
		},
		props: {
			title: String,
			statusBarColor: String,
			bgColor: String,
			showBack: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			style() {
				let _style = `height: ${this.customBarH}px;margin-bottom:${this.statusBarH}px`
				return _style
			}
		},

		methods: {
			back() {
				console.log(111)
				if (this.toBack) {
					this.$parent.toBack()
					return false
				}
				uni.navigateBack()
			}
		},
		mounted() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
						2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
					// 导航栏（胶囊）高度
					this.customBarH = navHeight;
					//  状态栏（顶部）高度
					this.statusBarH = res.statusBarHeight
				},
				fail(err) {
					console.log(err);
				}
			})

		},

	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		position: relative;
		z-index: 10;
		margin: 0;
	}

	.flexbox {
		width: 100%;
		padding: 0 20px;
		font-size: 40rpx;

		.back {
			margin-right: 8rpx;
		}
	}
</style>