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的屏幕方向,而非单个页面的私有属性。当二级页面锁定为横屏后,这个状态会持续生效,直到被再次改变。
解决方案:
-
在二级页面的
onUnload生命周期中重置方向(推荐): 这是最直接有效的方法。在横屏页面(二级页面)卸载时,将方向重置为竖屏。// 在二级页面(横屏页面)的 script 中 export default { onLoad() { // 进入页面时锁定为横屏 plus.screen.lockOrientation('landscape-primary'); }, onUnload() { // 页面卸载时,重置为竖屏,确保返回的页面正常显示 plus.screen.lockOrientation('portrait-primary'); } } -
在一级页面的
onShow生命周期中强制设置方向: 作为补充保障,可以在上级页面的onShow生命周期里也明确指定所需方向。// 在一级页面(竖屏页面)的 script 中 export default { onShow() { // 每次页面显示时,都确保是竖屏 plus.screen.lockOrientation('portrait-primary'); } }

