uni-app 横竖屏切换后跳转到其他界面,其他界面会保持上一次的方向

uni-app 横竖屏切换后跳转到其他界面,其他界面会保持上一次的方向

3 回复

是这样,第二次操作就正常。 应该是跳转的界面在堆栈里面,uniapp调用了缓存。


升级到 3.4.6.20220416-alpha 恢复正常。

uni-app 中,如果你在横竖屏切换后跳转到其他界面,默认情况下,其他界面会保持上一次的方向。这是因为 uni-app 的页面方向设置是基于整个应用的,而不是单个页面的。

解决方法

如果你希望每个页面都能独立控制横竖屏,可以使用以下方法:

1. 使用 manifest.json 配置

manifest.json 文件中,你可以为每个页面单独设置支持的方向。例如:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "orientation": "portrait" // 只支持竖屏
      }
    },
    {
      "path": "pages/other/other",
      "style": {
        "navigationBarTitleText": "其他页面",
        "orientation": "landscape" // 只支持横屏
      }
    }
  ]
}

2. 使用 plus.screen.lockOrientation API

你可以使用 plus.screen.lockOrientation API 在页面生命周期中动态控制屏幕方向。例如:

export default {
  onShow() {
    // 锁定为竖屏
    plus.screen.lockOrientation('portrait-primary');
  },
  onHide() {
    // 解锁屏幕方向
    plus.screen.unlockOrientation();
  }
}

3. 使用 uni.setScreenOrientation API

uni-app 提供了 uni.setScreenOrientation API,可以在页面中动态设置屏幕方向。例如:

export default {
  onShow() {
    // 设置为竖屏
    uni.setScreenOrientation({
      orientation: 'portrait'
    });
  },
  onHide() {
    // 恢复默认方向
    uni.setScreenOrientation({
      orientation: 'auto'
    });
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!