uniapp 如何实现横屏和竖屏切换

在uniapp中如何实现横屏和竖屏的自由切换？我需要在不同页面分别设置横屏或竖屏显示，但尝试了修改manifest.json的"screenOrientation"配置后，发现只能全局生效。请问有没有方法可以动态控制单个页面的横竖屏方向？比如通过API或CSS实现？如果有具体代码示例就更好了。

2 回复

在uniapp中，可通过以下方式实现横竖屏切换：

  1. 全局配置：在pages.json中设置"pageOrientation": "auto"
  2. 页面配置：在具体页面style中设置"pageOrientation": "landscape"
  3. 代码控制：使用plus.screen.lockOrientation()方法动态切换

注意：横竖屏切换时需考虑页面布局适配问题。


在 UniApp 中实现横屏和竖屏切换，可以通过以下方法实现，适用于不同平台（如 H5、App 等）：

1. 使用 CSS 媒体查询（仅适用于 H5 平台）

通过 CSS 检测屏幕方向，并调整布局。

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}
/* 横屏样式 */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

2. 使用 JavaScript 监听屏幕方向变化（适用于 H5 和部分 App 平台）

在页面中监听 orientationchange 事件，并更新数据或样式。

export default {
  data() {
    return {
      isLandscape: false
    };
  },
  onLoad() {
    // 初始检测方向
    this.checkOrientation();
    // 监听方向变化
    window.addEventListener('orientationchange', this.checkOrientation);
  },
  onUnload() {
    // 移除监听
    window.removeEventListener('orientationchange', this.checkOrientation);
  },
  methods: {
    checkOrientation() {
      this.isLandscape = Math.abs(window.orientation) === 90;
    }
  }
};

在模板中根据 isLandscape 动态调整布局。

3. 使用 UniApp 的 App 平台特定配置（仅适用于 App）

在 pages.json 中配置页面支持的方向：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "auto" // 可选 auto、portrait、landscape
      }
    }
  ]
}
  • auto：跟随系统方向。
  • portrait：强制竖屏。
  • landscape：强制横屏。

4. 使用原生插件（适用于 App 复杂需求）

如果需要更精细的控制（如锁定方向），可使用 uni-app 官方插件或原生模块：

  • 安装 uni-app 屏幕方向插件（如存在）。
  • 调用原生 API（需条件编译）：
    // #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary'); // 横屏
plus.screen.lockOrientation('portrait-primary'); // 竖屏
// #endif

注意事项：

  • 平台差异：H5 和 App 实现方式不同，需条件编译。
  • 用户体验：横竖屏切换时，注意页面布局适配，避免内容错乱。
  • 测试：在真机测试不同平台的行为。

根据需求选择合适的方法，简单场景用 CSS 或页面配置，复杂控制用 JavaScript 或原生 API。

回到顶部