uni-app平板从竖屏(一级页面)跳转横屏(二级页面)后,后退页面导致上级页面(一级页面)也变为横屏

uni-app平板从竖屏(一级页面)跳转横屏(二级页面)后,后退页面导致上级页面(一级页面)也变为横屏

1 回复

更多关于uni-app平板从竖屏(一级页面)跳转横屏(二级页面)后,后退页面导致上级页面(一级页面)也变为横屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的 uni-app 页面方向管理问题。问题的核心在于,当二级页面设置为横屏后,系统级别的屏幕方向被锁定。返回一级页面时,如果没有明确的指令,系统会保持当前的横屏状态,导致一级页面显示异常。

根本原因: uni-app 的页面方向主要由 plus.screen.lockOrientation API 控制。这个API设置的是应用全局当前Webview的屏幕方向,而非单个页面的私有属性。当二级页面锁定为横屏后,这个状态会持续生效,直到被再次改变。

解决方案:

  1. 在二级页面的 onUnload 生命周期中重置方向(推荐): 这是最直接有效的方法。在横屏页面(二级页面)卸载时,将方向重置为竖屏。

    // 在二级页面(横屏页面)的 script 中
    export default {
      onLoad() {
        // 进入页面时锁定为横屏
        plus.screen.lockOrientation('landscape-primary');
      },
      onUnload() {
        // 页面卸载时,重置为竖屏,确保返回的页面正常显示
        plus.screen.lockOrientation('portrait-primary');
      }
    }
    
  2. 在一级页面的 onShow 生命周期中强制设置方向: 作为补充保障,可以在上级页面的 onShow 生命周期里也明确指定所需方向。

    // 在一级页面(竖屏页面)的 script 中
    export default {
      onShow() {
        // 每次页面显示时,都确保是竖屏
        plus.screen.lockOrientation('portrait-primary');
      }
    }
回到顶部