uni-app 横屏展示时 navigateTo 跳转页面留白问题

信息类别	详情
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	win10
HBuilderX	正式
HBuilderX版本号	3.6.12
手机系统	Android
手机系统版本号	Android 8.1
手机厂商	小米
手机机型	MI PAD 4
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

app第一次横屏打开时，或者app强制横屏打开时，使用navigateTo跳转下一页，下一页的底部会有部分留白，展示的是上一页的内容。

预期结果：

当前页展示错误

实际结果：

当前页展示错误

bug描述：

app第一次横屏打开时，或者app强制横屏打开时，使用navigateTo跳转下一页，下一页的底部会有部分留白，展示的是上一页的内容。下面两张图，第一张留白大的，是上面描述的问题。第二张图，是正常展示。（竖屏操作一次，再横屏操作就正常了）

htzhanglong 1楼•6 小时前

24年有人解决这个问题吗

zlyuanteng 2楼•6 小时前

你好，我们是原生app集成uni sdk，app是横屏的，但是打开uni就成竖屏的了，如何解决

wuwangju 3楼•6 小时前

在uni-app开发中，当应用处于横屏模式时，使用navigateTo进行页面跳转时可能会出现留白问题。这通常是由于页面布局未能适应横屏的宽高比导致的。以下是一些通过代码调整页面布局以适应横屏模式的解决方案。

1. 使用 Flexbox 布局

Flexbox布局可以很好地适应不同的屏幕尺寸和方向。以下是一个简单的示例，展示如何使用Flexbox来确保页面内容在横屏模式下也能正确显示：

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

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

.content {
  width: 100%; /* 或者设置一个具体的宽度以适应内容 */
  max-width: 600px; /* 根据内容调整 */
  padding: 20px;
  box-sizing: border-box;
}
</style>

2. 动态调整样式

使用uni-app提供的API监听屏幕方向变化，并动态调整样式。以下是一个示例：

export default {
  data() {
    return {
      isLandscape: false
    };
  },
  onLoad() {
    const that = this;
    uni.getSystemInfo({
      success: function(res) {
        that.isLandscape = res.screenWidth > res.screenHeight;
      }
    });

    uni.onWindowResize(function(res) {
      that.isLandscape = res.screenWidth > res.screenHeight;
    });
  },
  computed: {
    containerStyle() {
      return this.isLandscape ? { height: '100vh', width: '100vw' } : {};
    }
  }
};

在模板中使用计算属性：

<template>
  <view :style="containerStyle" class="container">
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

3. 页面配置

确保在pages.json中正确配置了页面的横屏支持：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "screenOrientation": "auto" // 或者 "landscape" 强制横屏
        }
      }
    }
  ]
}

通过上述方法，你可以确保在uni-app中使用navigateTo进行页面跳转时，无论是在竖屏还是横屏模式下，页面都能正确显示，不会出现留白问题。