获取状态栏高度 ​

<template>
	<view>
		<view class="bar">
			<!-- 这是顶部状态栏的高度，适合用在APP端，在小程序端height固定位25px(刘海屏的手机就不适合用了) -->
		</view>
		<view style="background-color: red;">
			bar是一个顶部导航栏
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		}
	}
</script>
<style lang="scss">
	.bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

<template>
	<view>
		<view class="bar">
			<!-- 这是顶部状态栏的高度，适合用在APP端，在小程序端height固定位25px(刘海屏的手机就不适合用了) -->
		</view>
		<view style="background-color: red;">
			bar是一个顶部导航栏
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		}
	}
</script>
<style lang="scss">
	.bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

<template>
	<view>
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
		<view style="background-color: red;">
			iStatusBarHeight计算顶部导航栏的高度为：{{this.iStatusBarHeight}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			};
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			console.log(this.iStatusBarHeight);//47
		},
	}
</script>
<style lang="scss">
</style>

<template>
	<view>
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
		<view style="background-color: red;">
			iStatusBarHeight计算顶部导航栏的高度为：{{this.iStatusBarHeight}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			};
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			console.log(this.iStatusBarHeight);//47
		},
	}
</script>
<style lang="scss">
</style>