uni-app 横屏时，之前竖屏状态栏有占位问题

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

uni-app 横屏时，之前竖屏状态栏有占位问题

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 Android
手机系统版本号 Android 12
手机厂商 华为
手机机型 p40
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
  <view class="tenglu-container">  
      <view class="tenglu-bg" />  
      <view class="tenglu-body" @click="showComModal">显示弹窗</view>  
  </view>  
</template>  

<script>  

export default {  
  data() {  
    return {  
    };  
  },  
  onInit() {  

  },  
  onLoad() {  
      //横屏正方向  
      // #ifdef APP-PLUS  
      plus.screen.lockOrientation('landscape-primary')  
       plus.navigator.setFullscreen(true);    
      // #endif  
  },  
  methods: {  
  },  
};  
</script>  
<style lang="scss" scoped>  
.tenglu-body{  
    position: relative;  
    z-index: 10;  
    color: #fff;  
}  
.tenglu-bg{  
position: fixed;  
        width: 100vw;  
        height: 100vh;  
        top: 0;  
        left: 0;  
        background: #000;  
}  
</style>

操作步骤：

  • 点击进入当前页面

预期结果：

  • 黑色应该铺满全屏，显示弹窗文字应该在最左边

实际结果：

  • 最左边有一个原竖屏时的状态栏占位

bug描述：

希望某个页面横屏-全屏，结果竖屏时候的状态栏还在


Harmonyos Next教程
2 回复

找到原因了，manifest.json里面设置了statusbar.immersed


在处理uni-app横屏时状态栏占位问题，可以通过调整页面的样式和配置来确保在不同屏幕方向下都能正确显示。以下是一个具体的代码案例，展示了如何在uni-app中处理横屏和竖屏状态栏占位问题。

首先，确保在manifest.json中配置了应用支持横屏显示：

{
  "app-plus": {
    "distribute": {
      "apple": {
        "orientation": ["portrait", "landscape"]
      },
      "android": {
        "screenOrientation": "sensor"
      }
    }
  }
}

接下来，在页面的样式文件中（如App.vue或具体页面的.vue文件中的<style>部分），使用CSS媒体查询来处理横屏和竖屏的样式差异。

<template>
  <view class="container">
    <!-- 页面内容 -->
  </view>
</template>

<style scoped>
/* 通用样式 */
.container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

/* 竖屏样式 */
@media (orientation: portrait) {
  .container {
    /* 针对竖屏的特定样式 */
    /* 例如，可以调整padding来适应竖屏状态栏 */
  }
}

/* 横屏样式 */
@media (orientation: landscape) {
  .container {
    /* 针对横屏的特定样式 */
    /* 例如，可以调整padding来适应横屏状态栏 */
    padding-top: 0; /* 假设横屏时不需要额外的状态栏占位 */
  }
}
</style>

在这个例子中，使用了env(safe-area-inset-*)来确保页面内容不会被状态栏、导航栏或底部安全区域遮挡。这是uni-app提供的一种方式来适应不同设备的屏幕安全区域。

另外，如果需要在JavaScript中动态检测屏幕方向并调整样式，可以使用window.orientation（虽然这在某些现代浏览器中已被弃用，但uni-app环境可能支持）或者监听resize事件来检测屏幕大小变化，并据此调整页面布局。

export default {
  mounted() {
    window.addEventListener('resize', this.handleOrientationChange);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleOrientationChange);
  },
  methods: {
    handleOrientationChange() {
      if (window.orientation === 90 || window.orientation === -90) {
        // 横屏处理
      } else {
        // 竖屏处理
      }
    }
  }
}

注意：window.orientation在现代浏览器中可能不被推荐使用，但在uni-app的某些平台上可能仍然有效。更可靠的方法是使用screen.orientation.angle或者监听screen.orientationchange事件。不过，具体实现需根据uni-app的文档和平台兼容性来决定。

回到顶部