一、先去掉原生的导航，在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%
在这里插入图片描述

# vue.js # es6 # html # css # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：模型管理&数据集管理

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：机器学习算法的训练和推理

avatar 华为开发者空间