uniapp中的nvue页面，自定义导航栏顶部状态栏占位

一、前述

当我们的页面不需要原生导航栏时候，会在page.json中对应页面的style配置

{
    "navigationStyle": "custom"
}

这时候会引入一个问题就是页面内容会与手机的状态栏重合

二、官方文档方案（在nvue无效）

uniapp官网在关于page.json配置文档（uni-app官网）中，对于自定义导航栏的状态栏填充给出了如下示例代码

<template>
  <view>
      <view class="status_bar">
          <!-- 这里是状态栏 -->
      </view>
      <view> 状态栏下的文字 </view>
  </view>
</template>    
<style>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
  }
</style>

但是由于在nvue中var(--status-bar-height)无法使用，导致status_bar无法取到正确的高度，最终致使该方法在nvue类型页面中失效

三、在nvue中的解决方案

请注意，以下方案仅使用于APP端，其他无法调用plus接口的客户端会报错无法使用

在nvue页面中，我们可以使用h5plus接口，在h5pluse的官网文档（HTML5+ API Reference）中，有一个可以获取系统状态栏高度的函数：

plus.navigator.getStatusbarHeight();

据此，我们可以使用style绑定的方式来实现状态栏高度的动态自适应。

最终代码如下

<template>
	<view>
		<view class="status_bar" :style="{'height':barHeight+'px'}">
		  <!-- 这里是状态栏 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 25,//动态高度初始值
			}
		},
		onLoad(){
			//使用h5plus接口获取状态栏高度
			this.barHeight = plus.navigator.getStatusbarHeight();
		}
	}
</script>

<style> 
	.status_bar{
		position: fixed;
		top: 0; 
		width: 750upx;/*在nvue页面中，使用百分比会失效*/
		background-color: #000000;/*状态栏背景色*/
	}
</style>