uni-app 横屏支持需求

在uni-app中实现横屏支持，通常需要配置页面的方向设置以及处理一些界面布局上的调整。以下是一个基本的实现步骤和代码示例，展示如何在uni-app项目中添加横屏支持。

步骤一：配置manifest.json

首先，在manifest.json文件中配置应用支持的方向。找到app-plus节点下的distribute > apple和distribute > android，分别设置屏幕方向。

"app-plus": {
    "distribute": {
        "apple": {
            // iOS配置
            "screenOrientation": "portraitAndLandscape" // 支持竖屏和横屏
        },
        "android": {
            // Android配置
            "screenOrientation": "sensor" // 传感器决定方向
        }
    }
}

步骤二：页面配置

在需要支持横屏的页面中，可以通过页面的style属性或pages.json配置来控制屏幕方向。

方法一：在页面的style中设置

在页面的<style>标签内添加以下代码，强制页面在横屏模式下显示：

<style scoped>
page {
    /* 强制横屏 */
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}
</style>

注意，这种方法需要手动调整布局以适应横屏显示。

方法二：在pages.json中配置

在pages.json中为特定页面设置屏幕方向（如果uni-app支持直接在pages.json中配置方向，此步骤可能因版本而异）：

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",
            // 假设支持配置方向（实际支持情况需查阅文档）
            "screenOrientation": "landscape"
        }
    }
]

注意：pages.json直接配置屏幕方向的功能可能并不在所有uni-app版本中支持，具体需查阅官方文档。

步骤三：调整布局

由于横屏模式下屏幕宽高比会发生变化，因此需要对页面布局进行相应调整。使用Flexbox或Grid布局可以更容易地适应不同的屏幕方向。

<view class="container">
    <view class="content">
        <!-- 页面内容 -->
    </view>
</view>

<style>
.container {
    display: flex;
    flex-direction: column; /* 或 row，根据横屏布局调整 */
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}
.content {
    /* 内容样式 */
}
</style>

通过上述步骤，你可以在uni-app项目中实现对横屏的支持，并调整布局以适应横屏显示。确保在实际项目中测试不同设备和屏幕方向，以确保用户体验的一致性。