uni-app 3.4.5.20220408-alpha 版本安全区无法隐藏

操作步骤：

在manifest.json的app-plus下配置

{
  "safearea": {
    "bottom": {
      "offset": "none" /* 去除ios底部安全区 */
    }
  }
}

预期结果：

可以隐藏安全区

实际结果：

无法隐藏

bug描述：

在manifest.json的app-plus下配置

{
  "safearea": {
    "bottom": {
      "offset": "none" /* 去除ios底部安全区 */
    }
  }
},
不生效还是会有白色的安全区

开发环境	版本号	项目创建方式
Windows	Windows10	HBuilderX
iOS	iOS 15
手机厂商	手机机型	页面类型
苹果	iPhone11	nvue

caililin 1楼•1 个月前

就真的没有官方人员来看一下？

itying888 2楼•1 个月前

hx刚出了新版本，更新下试试

h691938207 3楼•1 个月前

升级最新版本测试一下

vueper 4楼•1 个月前

1. 检查 `manifest.json` 配置

在 manifest.json 中，确保你已经正确配置了安全区的显示与隐藏。你可以在 app-plus 节点下添加 safearea 配置：

{
  "app-plus": {
    "safearea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}

2. 使用 CSS 强制隐藏安全区

你可以通过 CSS 来强制隐藏安全区。在页面的样式文件中添加以下代码：

/* 隐藏 iOS 安全区 */
page {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}

/* 隐藏 Android 安全区 */
page {
  padding-bottom: 0;
}

3. 使用 `uni.getSystemInfoSync()` 动态调整布局

你可以使用 uni.getSystemInfoSync() 获取设备信息，并根据安全区的信息动态调整页面布局：

onLoad() {
  const systemInfo = uni.getSystemInfoSync();
  if (systemInfo.safeArea) {
    this.safeAreaBottom = systemInfo.safeArea.bottom;
    // 根据安全区信息调整布局
  }
}

4. 更新 `uni-app` 版本

如果你使用的是 3.4.5.20220408-alpha 版本，建议你尝试更新到最新稳定版本，因为该版本可能存在一些已知问题。你可以通过以下命令更新 uni-app：

npm install -g [@vue](/user/vue)/cli
vue create -p dcloudio/uni-preset-vue my-project