APP竖屏切换横屏出现严重BUG uni-app

APP竖屏切换横屏出现严重BUG uni-app

开发环境 版本号 项目创建方式
Mac macOS Monterey 版本 12.7.6 HBuilderX

操作步骤：

  • 启动APP后直接点击跳转页面，反复几次就会出现

预期结果：

  • 正常横屏显示

实际结果：

  • 未正确显示后续页面内容

bug描述：

  • 第一个页面为竖屏页面，点击跳转到第二个页面，跳转到第二个页面后强制切换为横屏，使用的plus.screen.lockOrientation切换的横屏模式；在跳转到第二个页面后再返回偶尔会出现黑屏（这是第一个BUG）；正常跳转到第二个页面后，再次跳转到第三个页面，大概率会出现第三个页面无法展示页面内容且显示第二个页面的内容（这是第二个BUG）；
  • 以上BUG如果首次没有复现可以反复多次测试一下就能复现了

更多关于APP竖屏切换横屏出现严重BUG uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

该bug反馈内容基本完整但存在关键缺失：标题、描述、复现步骤、预期/实际结果和分类信息均有提供，但缺少核心代码示例（如页面跳转逻辑、屏幕旋转实现方式及manifest.json配置），导致官方难以直接复现问题。复现步骤过于简略（仅"反复点击跳转"），未说明具体如何调用plus.screen.lockOrientation及页面结构，无法精准定位问题。
bug成立可能性高：知识库显示历史版本存在多处横竖屏切换相关问题（如iOS平台修复过uni.showActionSheet横竖屏布局错乱App-iOS平台 修复 4.25版本引发的 API uni.showActionSheet 适配横竖屏切换布局错乱），且用户使用HBuilderX 4.45（非最新版），可能存在已修复但未覆盖的旧版本问题。华为Mate 20 Pro的Android 10系统对屏幕旋转处理较敏感，符合典型复现场景。
需补充：提供manifest.json中orientation配置、页面跳转代码及屏幕旋转调用逻辑。建议用户先升级至最新HBuilderX（当前正式版已超4.45），并检查是否按屏幕旋转文档规范使用API。若仍复现，需确认是否在onReady中执行旋转操作（避免页面未渲染完成时强制旋转导致渲染异常）。 内容为 AI 生成，仅供参考

更多关于APP竖屏切换横屏出现严重BUG uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题可能与屏幕方向切换时的生命周期处理有关。建议：
针对黑屏问题，尝试在返回第一个页面时手动锁定回竖屏模式 对于页面内容显示错误，可能是因为页面缓存导致。可以尝试：

在页面跳转时使用uni.reLaunch代替uni.navigateTo
或在页面onHide生命周期中手动清空页面数据 确保所有页面都正确实现了onLoad和onShow生命周期函数

可以参考uniapp的页面生命周期文档和屏幕方向API进行调试。
内容为 AI 生成，仅供参考

这是源码

解决了嘛

回复 1***@qq.com: 还没有，官方也不回复，唉~

针对你描述的APP竖屏切换横屏时出现的黑屏和页面内容错乱问题，这通常与uni-app中页面栈管理、屏幕方向锁定以及Webview渲染时机有关。以下是核心原因分析和解决方案：

主要原因：

  1. 页面生命周期与屏幕方向异步冲突：plus.screen.lockOrientation切换横屏时，若页面渲染未完成或过渡动画未结束，可能导致Webview渲染异常。
  2. Webview缓存残留：快速切换页面时，前一个页面的Webview可能未完全销毁，导致内容残留或黑屏。
  3. CSS适配未及时生效：横屏切换后，部分样式（如基于窗口尺寸的CSS计算）可能未触发重新渲染。

解决方案：

  1. 延迟锁定屏幕方向：在页面的onReady或onShow生命周期中，使用setTimeout延迟执行横屏切换，确保页面基础渲染完成。
    onReady() {
  setTimeout(() => {
    plus.screen.lockOrientation('landscape');
  }, 100);
}
  2. 强制重置Webview：在返回竖屏页面时，调用uni.reLaunch或uni.navigateBack结合setTimeout重新加载页面，避免缓存问题。
    // 返回时重置页面
onBackPress() {
  setTimeout(() => {
    plus.screen.lockOrientation('portrait');
  }, 50);
}
  3. 使用CSS媒体查询适配横屏：在页面CSS中增加横屏样式，减少依赖JS切换的渲染波动。
    [@media](/user/media) screen and (orientation: landscape) {
  .content { transform: rotate(90deg); }
}
  4. 检查页面栈管理：确保跳转时使用uni.navigateTo而非重定向类API，避免页面栈混乱。横屏页面返回前可先锁定竖屏：
    beforeDestroy() {
  plus.screen.lockOrientation('portrait');
}
回到顶部