uni-app横竖屏切换后页面栈异常导致页面返回跳转bug

uni-app横竖屏切换后页面栈异常导致页面返回跳转bug

操作步骤：

点击搜索进入page1，》2》3》横屏4返回竖屏》3》本应2页面，结果显示1页面，堆栈显示有2

预期结果：

显示页面2

实际结果：

显示页面1

bug描述：

当切换横竖屏后返回，页面和页面栈对不上异常，返回异常
截图显示 在page4横竖屏返回后，从page3返回本应该到page2，结果显示page1，打印显示page2

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

image

下载附件


更多关于uni-app横竖屏切换后页面栈异常导致页面返回跳转bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app横竖屏切换后页面栈异常导致页面返回跳转bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的横竖屏切换导致的页面栈管理问题。在uni-app中，横竖屏切换会触发页面的重新渲染，可能引起路由状态与页面栈不同步。

问题分析：

  1. 横竖屏切换时，页面实例可能被重新创建
  2. 页面栈中的路由记录与实际显示的页面实例出现不一致
  3. 返回时系统读取了错误的路由记录

解决方案：

  1. 监听横竖屏切换事件
onLoad() {
  // 监听横竖屏切换
  uni.onWindowResize((res) => {
    if (res.deviceOrientation === 'landscape' || res.deviceOrientation === 'portrait') {
      this.handleOrientationChange()
    }
  })
}
  1. 手动维护页面栈状态 在横竖屏切换时，通过getCurrentPages()获取当前页面栈，并保存关键页面数据：
handleOrientationChange() {
  const pages = getCurrentPages()
  // 保存页面栈信息到全局或缓存
  uni.setStorageSync('pageStackBackup', pages.map(page => page.route))
}
  1. 修复返回逻辑 在page3的返回事件中，检查页面栈状态：
onBackPress() {
  const currentPages = getCurrentPages()
  if (currentPages.length >= 2) {
    const targetPage = currentPages[currentPages.length - 2]
    // 验证目标页面是否为预期的page2
    if (targetPage && targetPage.route === 'pages/page2/page2') {
      uni.navigateBack({ delta: 1 })
    } else {
      // 页面栈异常，手动跳转到page2
      uni.redirectTo({ url: '/pages/page2/page2' })
    }
  }
  return true
}
  1. 使用页面生命周期管理 在横竖屏切换时，确保页面数据正确恢复：
onShow() {
  // 检查是否从横竖屏切换返回
  if (this.isOrientationChanged) {
    this.restorePageState()
    this.isOrientationChanged = false
  }
}
回到顶部