uni-app 鸿蒙NEXT底部安全区配置无效

uni-app 鸿蒙NEXT底部安全区配置无效

示例代码：

"safarea" : {
"bottom" : {
"offset" : "none"
}
}

操作步骤：

配置 下面的代码

"safarea" : {
"bottom" : {
"offset" : "none"
}
}

预期结果：

不显示底部白条

实际结果：

显示底部白条

bug描述：

配置 自定义底部安全区后，在手机上真机仍然显示底部白条



| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/App       |
| PC开发环境     | Mac              |
| PC操作系统版本 | 15.1             |
| HBuilderX类型  | Alpha            |
| HBuilderX版本  | 4.74             |
| 手机系统       | HarmonyOS NEXT   |
| 手机系统版本   | HarmonyOS 5.0.5  |
| 手机厂商       | 华为             |
| 手机机型       | nova 14u         |
| 页面类型       | vue              |
| vue版本        | vue3             |
| 打包方式       | 云端             |
| 项目创建方式   | HBuilderX        |

更多关于uni-app 鸿蒙NEXT底部安全区配置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

safearea 是

更多关于uni-app 鸿蒙NEXT底部安全区配置无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


那鸿蒙next如何才能解决这个需求呢

回复 y***@163.com: 加到app-harmony下

在鸿蒙NEXT系统中，安全区配置确实存在兼容性问题。目前uni-app对鸿蒙NEXT的适配仍在完善中，安全区配置可能无法完全生效。

建议的解决方案：

  1. 使用CSS变量适配：
page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  1. 检查manifest.json配置位置： 确保安全区配置位于"app-plus" -> "safearea"节点下：
"app-plus": {
  "safearea": {
    "bottom": {
      "offset": "none"
    }
  }
}
  1. 临时解决方案： 在页面样式中强制设置：
.container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
回到顶部