xiongmao/components/header-view/header-view.vue

<template>
	<view class="header-view" :style="size">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'HeaderView',
		data() {
			return {
				size: "",
			};
		},
		created() {
			
			// #ifdef MP
			let {height, top, left} = uni.getMenuButtonBoundingClientRect();
			this.size = `padding-top: ${top}px; min-height: ${height}px; height: max-content`;
			// #endif
			// #ifdef APP || H5
			let top = 0, height = 32;
			const {statusBarHeight} = uni.getSystemInfoSync();
			top += statusBarHeight;
			this.size = `padding-top: ${top + 10}px; min-height: ${height}px; height: max-content`;
			// #endif
			this.headerContentHeight = height;
			
			
			// console.log("top bar created");
			// let size = uni.getMenuButtonBoundingClientRect();
			// console.log(size);
			// this.size = `padding-top: ${size.top}px; min-height: ${size.height}px; height: max-content`;
		},
		methods: {
			getSize() {
				const {height, top, left} = uni.getMenuButtonBoundingClientRect();
				return {
					height,
					top,
					contentWidth: left- 7,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-view{
		width: 100%;
		padding-bottom: 10px;
		position: relative;
	}
</style>