uniapp 横竖屏

在 uni-app 中，可以通过以下方式来实现横竖屏的切换：

1. 在 manifest.json 文件中配置横竖屏支持。

{
  "name": "myApp",
  "orientation": "portrait" // portrait 表示竖屏，landscape 表示横屏
}

2. 在 App.vue 文件中监听横竖屏切换事件，并根据当前屏幕方向来设置样式。

<template>
  <div :class="{'portrait': isPortrait, 'landscape': !isPortrait}">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPortrait: true // 初始值设置为竖屏
    }
  },
  mounted() {
    window.addEventListener('orientationchange', this.handleOrientationChange)
  },
  beforeDestroy() {
    window.removeEventListener('orientationchange', this.handleOrientationChange)
  },
  methods: {
    handleOrientationChange() {
      this.isPortrait = window.orientation === 0 // 竖屏为 0，横屏为 -90 或 90
    }
  }
}
</script>

<style>
.portrait {
  /* 竖屏样式 */
}

.landscape {
  /* 横屏样式 */
}
</style>

这样就可以在 uni-app 中实现横竖屏的切换了。需要注意的是，不同的设备或浏览器可能会有不同的横竖屏切换方式，因此需要在实际测试中进行调试。