uniapp自定义头部（状态栏+导航栏）

子组件：

<view>
	<view class="top_bgimg" :style="'height:'+topBarHeight+'px;'">
		<view class="top_cont" :style="'height:'+ tabBarHeight+'px;margin-top:'+stateBarHeight+'px;'">
			<image v-if="isBack" src="/static/images/fanhui.png" @tap="gotoBack"
				mode="widthFix"></image>
			<text>{{title}}</text>
		</view>
	</view>
	<view :style="'height:'+topBarHeight+'px;'"></view>
</view>

data() {
return {
		topBarHeight: 0, //状态栏加导航栏高度
		stateBarHeight: 0, //导航栏高度
		tabBarHeight: 50, //状态栏高度
	};
},
props: {
	title: {
		type: String,
		default: ''
	},
	isBack: {
		type: Boolean,
		default: false
	}
},
mounted: function() {
	var self = this;
	uni.getSystemInfo({
		success: function(res) {
			self.stateBarHeight = res.statusBarHeight
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let paddingSize = menuButtonInfo.top - self.stateBarHeight
			self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
			self.topBarHeight = menuButtonInfo.bottom + paddingSize
			// #endif
			
			// #ifdef APP-NVUE || APP-PLUS 
			let menuRect = wx.getMenuButtonBoundingClientRect()
			self.topBarHeight = menuRect.top + menuRect.height
			// #endif
			//向父组件传回头部高度
			self.$emit("sendDefault", self.topBarHeight)
		},
	})
},

.top_bgimg{width: 100%;position: fixed;top: 0;left: 0;z-index: 99999;background: url(https://img0.baidu.com/it/u=4169727733,3142297347&fm=26&fmt=auto);background-size: 100%;color: black;font-size: 32rpx;}
.top_cont{display: flex;align-items: center;padding: 20rpx;box-sizing: border-box;}
.top_cont image{width: 36rpx;height:34rpx;float: left;margin:6rpx 10rpx 0 0;}

父组件

<view>
  <headerbg @sendDefault="getSonValue" :isBack="true" title="我的商城"></headerbg>
</view>
<script>
import headerbg from "@/components/headerbg/index.vue"
components: {headerbg},

getSonValue: function(res){
	this.topBarHeight = res;
	console.log(res)
},
</script>

效果如下