uniapp 页面状态栏问题

首先要知道导航栏、状态栏都是什么

如图

1.先解决状态栏问题

<template>
	<view class="my">
		<!-- 获取状态栏高度，适配不同机型 -->
		<view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			}
		},
		onLoad() {
			// 获取高度
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.status-bar {
		width: 100%;
		// 状态栏高度固定,页面滚动效果也不会影响到状态栏显示
		position: fixed;
		top: 0;
		background: #fff;
		z-index: 999;
	}
</style>

2.导航栏

由于状态栏固定定位，位置腾出，为了页面正常显示，我们需要将下面的页面设置margin-top