UniApp中如何实现APP页面横竖屏切换？_uniapp横屏竖屏切换

前段时间做了一个驾考项目，该项目是使用UniApp搭建的，其中就遇到的一个需求就是横竖屏切换。用横屏来模拟驾照考试。通过查阅文档发现，在UniApp中，要实现横竖屏切换可以由以下步骤来实现。

一、通过配置页面的 manifest.json 文件中设置 app-plus 字段的 flexible属性

要启用横竖屏切换功能，首先需要在 manifest.json 文件中设置 app-plus 字段的 flexible 属性为 true。该属性用于启用 APP 竖屏切换为横屏时自动旋转页面的功能。

示例 manifest.json 文件的配置如下：

{
  "app-plus": {
    "flexible": true
  }
}

二、使用plus.screen.lockOrientation

使用plus.screen.lockOrientation 方法来手动控制页面的横竖屏切换。该方法接受一个字符串参数，用于指定要锁定的屏幕方向。

以下是一个示例代码，演示如何在 UniApp 中实现手动控制页面横竖屏切换：

export default {
  mounted() {
    // 监听屏幕方向变化
    window.addEventListener('orientationchange', this.handleOrientationChange)
  },
  destroyed() {
    // 移除屏幕方向变化的监听
    window.removeEventListener('orientationchange', this.handleOrientationChange)
  },
  methods: {
    handleOrientationChange() {
      // 横屏
      if (window.orientation === 90 || window.orientation === -90) {
        this.lockOrientation('landscape')
      }
      // 竖屏
      else {
        this.lockOrientation('portrait')
      }
    },
    lockOrientation(orientation) {
      if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {
        plus.screen.lockOrientation(orientation)
      }
    }
  }
}

三、下面我们通过page1、page2两个页面来实现一个简单的横竖屏切换demo

page1示例：

<template>
  <view>
    <text>这是竖屏页面1的内容</text>
    <button @click="goToPage2">go page2</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    goToPage2() {
      // 锁定横屏方向
      if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {
        plus.screen.lockOrientation('landscape-primary')
      }
      // 跳转到 page2 页面
      uni.navigateTo({
        url: '/pages/page2/index'
      })
    }
  }
}
</script>

page2示例：

<template>
  <view class="landscape-layout">
    <text>这是横屏页面2的内容</text>
    <button @click="goToPage1">go page1</button>
  </view>
</template>
 
<script>
  export default {
    methods: {
      goToPage1() {
        // 锁定竖屏方向
        if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {
        	plus.screen.lockOrientation('portrait-primary')
        }
        // 跳转到 page1 页面
        uni.navigateTo({
        	url: '/pages/page1/index'
        })
      }
    }
  }
</script>
 
<style>
.landscape-layout {
  /* 横屏布局样式 */
  transform: rotate(90deg);
  transform-origin: center;
  width: 100vh;
  height: 100vw;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50vw;
  margin-left: -50vh;
}
</style>

上面代码中，通过调用plus.screen.lockOrientation 方法锁定屏幕方向为 'portrait-primary'（竖屏）或 'landscape-primary'（横屏)。然后，使用 uni.navigateTo 方法进行页面跳转。

经过以上步骤我们就能在UniApp中实现一个简单的横竖屏切换了，希望以上内容能够帮助到你！

此外，若有正在储备面试题（前端、Java、PHP....）的小伙伴，可以存图、扫一扫