APP中某A页面竖屏切换横屏后再跳转到B页面，B页面偶尔会出现不显示本页面内容而显示上一A页面内容的uni-app问题

APP中某A页面竖屏切换横屏后再跳转到B页面，B页面偶尔会出现不显示本页面内容而显示上一A页面内容的uni-app问题

操作步骤：

有多种情况：

  1. 多次点击非A和B页面
  2. 应用在后台停留长时间
  3. 应用更新安装后 再操作A页面跳转B页面就会出现

预期结果：

正常显示

实际结果：

未正常显示页面内容

bug描述：

uniapp 开发的Android APP应用，默认是竖屏的，正式打包安装运行，然后A页面打开后强制横屏，然后再由A页面跳转至B页面，B页面也是横屏显示。现在有一个问题，A页面跳转B页面后，偶尔会出现B页面不显示而是显示的A页面的内容，神奇的是B页面中的点击事件还都可以响应，这是什么原因造成的 竖屏切换横屏使用的：plus.screen.lockOrientation('landscape-primary'); manifest.json中也设置screenOrientation：[“portrait-primary”,“portrait-secondary”,“landscape-primary”,“landscape-secondary”]。

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 macOS Monterey 12.7.6
HBuilderX类型 正式
HBuilderX版本 4.45
手机系统 Android
手机系统版本 Android 10
手机厂商 华为
手机机型 Mate20 Pro
页面类型 vue
vue版本 vue2
打包方式 离线
项目创建方式 HBuilderX

Image Image Image


更多关于APP中某A页面竖屏切换横屏后再跳转到B页面，B页面偶尔会出现不显示本页面内容而显示上一A页面内容的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于APP中某A页面竖屏切换横屏后再跳转到B页面，B页面偶尔会出现不显示本页面内容而显示上一A页面内容的uni-app问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app页面渲染异常问题，通常由屏幕方向切换与页面生命周期冲突导致。核心原因在于横竖屏切换触发了Webview的重绘机制，而页面跳转时DOM未及时更新。

主要问题分析：

  1. Webview缓存机制：屏幕方向改变时，系统会重新创建Activity，Webview可能保留了之前的页面快照，导致视觉上显示旧页面内容，但实际DOM已是新页面。

  2. CSS渲染延迟：横屏切换改变了视口尺寸，CSS布局需要重新计算。在跳转过程中，如果CSS计算未完成，可能导致新页面内容无法正确显示。

  3. 页面栈管理异常：使用plus.screen.lockOrientation强制横屏时，Android系统会重建页面上下文，可能干扰uni-app的页面栈管理。

解决方案：

  1. 在B页面的onLoad或onShow生命周期中添加强制重绘：
onShow() {
  this.$nextTick(() => {
    // 强制触发页面重绘
    if (this.$refs.container) {
      this.$refs.container.style.display = 'none'
      this.$refs.container.offsetHeight // 触发重排
      this.$refs.container.style.display = ''
    }
  })
}
  1. 优化页面跳转时机：在A页面跳转前确保横屏切换已完成
// A页面跳转前
plus.screen.lockOrientation('landscape-primary')
setTimeout(() => {
  uni.navigateTo({
    url: '/pages/B'
  })
}, 100)
回到顶部