uni-app页面通顶（沉浸式）时如何避开带刘海屏幕的刘海遮挡

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app页面通顶（沉浸式）时如何避开带刘海屏幕的刘海遮挡

开发环境 版本号 项目创建方式

页面通顶的情况下，H5的导航条上面的标题或者搜索框被带刘海的屏幕的留海遮挡，原先可以直接写死padding-top 20px，目前出来了刘海屏该如何去兼容呢？求大神指教。

Harmonyos Next教程
8 回复

有两种方法可以获取系统状态栏高度：

UA中有保存 字符串格式为"Html5Plus/1.0 (Immersed/18.0)"，括号中的数字就是系统状态栏高度，可通过方式获取： var immersed = 0;
var ms=(/Html5Plus/.+\s(.(Immersed/(\d+.?\d).*))/gi).exec(navigator.userAgent);
if(ms&&ms.length>=3){
immersed=parseFloat(ms[2]);
} 通过5+API获取 API：plus.navigator.getStatusbarHeight 参考5+规范http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight


好的，问题终于得到完美的解决了。

uniapp怎么处理

uniapp呢？

uniapp呢？

怎么知道是刘海屏呢

if(plus.navigator.hasNotchInScreen()){ console.log(‘此设备是刘海屏’); }else{ console.log(‘此设备不是刘海屏’); }

在uni-app中实现页面通顶（沉浸式）时，避开带刘海屏幕的刘海遮挡，通常需要利用设备的系统状态栏高度来动态调整页面的顶部布局。以下是一个实现这一需求的代码案例：

  1. 获取系统状态栏高度： uni-app 提供了 uni.getSystemInfoSync() 方法，可以获取设备的系统信息，包括状态栏高度。
// 在页面的 onLoad 或 onReady 生命周期函数中获取系统状态栏高度
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
  1. 设置页面样式： 在页面的样式文件中，使用 env() 函数（仅在微信小程序中支持）或自定义的样式变量来设置页面的顶部 padding，确保内容不会被状态栏遮挡。对于非微信小程序平台，可以使用条件编译。
/* 在页面的 .vue 文件的 <style> 部分 */
/* 通用样式，适用于所有平台（不包括微信小程序） */
.page-content {
  /* 根据需要设置其他样式 */
  padding-top: calc(env(safe-area-inset-top) + var(--status-bar-height, 0px));
}

/* 微信小程序专用样式 */
/* #ifdef MP-WEIXIN */
.page-content {
  padding-top: calc(env(safe-area-inset-top) + constant(safe-area-inset-top) + var(--status-bar-height, 0px));
}
/* #endif */
  1. 动态设置状态栏高度： 在页面的脚本部分，通过数据绑定将状态栏高度传递给样式变量。
<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = `${systemInfo.statusBarHeight}px`;
  }
};
</script>
  1. 在模板中使用： 在页面的模板部分，确保 .page-content 类被正确应用到需要避开刘海遮挡的内容区域。
<template>
  <view class="page-content">
    <!-- 页面内容 -->
  </view>
</template>
  1. 注意事项：
    • env(safe-area-inset-top) 是 CSS 环境变量，用于表示安全区域顶部内边距，在 iOS 11+ 的设备上支持。
    • constant(safe-area-inset-top) 是 CSS 常量，已被废弃，但在一些旧版本的 iOS 设备上仍然有效，因此与 env() 一起使用可以确保兼容性。
    • var(--status-bar-height, 0px) 是一个自定义 CSS 变量，用于在 JavaScript 中动态设置状态栏高度。

通过上述步骤，你可以在 uni-app 中实现页面通顶时避开带刘海屏幕的刘海遮挡。

回到顶部