uni-app 可以旋转90°么

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app 可以旋转90°么

我在外层旋转，没起作用，这样 style="transform: rotate(90deg);margin-top:0px;"

Harmonyos Next教程
2 回复

都加上试试，我刚试的我这是可以旋转的 transform: rotate(45deg);
-webkit-transform: rotate(45deg);

        -moz-transform: rotate(45deg);<br>

当然可以，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它支持编译到 H5、小程序、App 等多个平台。对于 App 平台，特别是原生 App，你可以通过调用原生 API 来实现屏幕旋转的功能。下面是一个如何在 App 端实现屏幕旋转 90° 的示例代码。

1. 修改 manifest.json

首先，你需要在 manifest.json 中配置 App 的屏幕方向权限。

{
  "mp-weixin": {}, // 其他平台配置...
  "app-plus": {
    "distribute": {
      // 分发渠道配置...
    },
    "screenOrientation": "auto" // 允许自动旋转屏幕
  }
}

2. 使用原生模块控制屏幕旋转

在 uni-app 中，你可以通过 plus.screen 对象来控制屏幕的方向。以下是一个示例代码，展示如何在页面加载时和按钮点击时分别设置屏幕旋转 90°。

在 pages/index/index.vue 中：

<template>
  <view>
    <button @click="rotateScreen">Rotate Screen 90°</button>
  </view>
</template>

<script>
export default {
  methods: {
    rotateScreen() {
      #ifdef APP-PLUS
        const orientations = ['portrait-primary', 'portrait-secondary', 'landscape-primary', 'landscape-secondary'];
        let currentOrientation = plus.screen.orientation;
        let newOrientationIndex = (orientations.indexOf(currentOrientation) + 1) % orientations.length;
        let newOrientation = orientations[newOrientationIndex];

        plus.screen.lockOrientation(newOrientation);
      #endif
    }
  },
  onLoad() {
    #ifdef APP-PLUS
      // 初始化屏幕方向，这里可以根据需要设置为任意方向
      const initialOrientation = 'landscape-primary'; // 例如初始化为横屏主方向
      plus.screen.lockOrientation(initialOrientation);
    #endif
  }
}
</script>

<style>
/* 样式代码 */
</style>

注意事项

  1. 平台差异：上述代码仅适用于 App 平台（#ifdef APP-PLUS），不适用于 H5 或小程序平台。
  2. 权限问题：确保你的 App 有权限修改屏幕方向，特别是在 iOS 上，你可能需要在 Xcode 的 Info.plist 中添加相关权限设置。
  3. 用户体验：频繁或意外的屏幕旋转可能会影响用户体验，建议谨慎使用。

通过上述代码，你可以在 uni-app 中实现屏幕旋转的功能。根据实际需求，你可以进一步调整旋转逻辑和触发条件。

回到顶部