uni-app获取手机顶部状态栏高度，并设置其与导航栏navbar的距离

1. 动态绑定 navbar 与顶部的距离

<view class="nav-bar" :style="{marginTop: systemBarHeight + 'px'}">
</view>

2. 获取系统栏高度

	data() {
		return {
			// 系统状态栏的高度
			systemBarHeight: 0
		};
	},
	computed: {},
	watch: {},
	created() {
		this.getSysteminfo();
	},
	methods: {
		// 获取系统栏高度
		getSysteminfo() {
			uni.getSystemInfo({
				success: res => {
					this.systemBarHeight = res.statusBarHeight;
				}
			});
		}
	}

获取系统信息的官方链接: https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

谷歌浏览器调试（顶部没有手机状态栏）

手机调试（顶部有手机状态栏）

如果对你有帮助点个赞吧，谢谢！！