在使用 uniapp 进行 混合app 开发的时候我们会遇到拖动页面时页面内容与手机顶部状态栏重叠的问题,下面我们来 uniapp 解决顶部状态栏重叠的问题。

uniapp顶部状态栏重叠

1635565017

 通过以上图片可以看到现在的页面时要与手机顶部状态栏重叠的,用户体验特别不友好,下面我们对 uniapp 与手机顶部状态栏重叠进行一个优化

优化app与手机顶部状态栏重叠问题

 我们只需要在开发 uniapp 的时候在 manifest.json 文件配置项里面点击源码视图 app-plus 项关闭 immersed 即可。

  • manifest.json
"app-plus" : {
    "statusbar": {  
        "immersed": false  
    }
}

 如果不存在可以添加 statusbar 配置项如图

1635565379

优化解决状态栏重叠

1635565791

 我们通过以上配置编辑保存完成之后 重新加载app 后可以看到顶部状态栏重叠问题已经 完全解决 了。