uniapp之自定义导航栏和手机顶部状态栏高度设置

一、先去掉原生的导航，在pages.json中写入以下代码：

 "navigationStyle":"custom"
// 或者  
"app-plus":{
		"titleNView":false
	}
//  (两种方式，选择其中一个就行)

二、匹配手机端

一定要腾出手机状态栏的高度;不然手机状态栏会遮挡内容

手机状态栏如图所示：

三、在页面中建一个空view并写上如图style

<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">
			
</view>
// height: var(--status-bar-height); 自动匹配各个手机端的高度

在顶部创建一个空div，写入如下图所示：

height: var(–status-bar-height)；
width:100%