uni-app - 禁用 APP 横屏旋转（用户操作行为）

r囧r小猫 2022-09-05 14:52 653阅读 0赞

前言

注意：利用 HTML5+ API 进行操作，这也就造成了 除了APP端 都不会生效（其他端参见 该 API）。

有时候，我们不希望用户利用 手机操作或重力感应 进行对咱们 app 进行旋转横屏（玩游戏那样），这样就会导致样式错乱。

解决方案

说明：锁定屏幕方向后屏幕只能按锁定的屏幕方向显示，关闭当前页面后仍然有效。

锁定屏幕方向可取以下值： “portrait-primary”: 竖屏正方向； “portrait-secondary”: 竖屏反方向，屏幕正方向按顺时针旋转180°； “landscape-primary”: 横屏正方向，屏幕正方向按顺时针旋转90°； “landscape-secondary”: 横屏方向，屏幕正方向按顺时针旋转270°； “portrait”: 竖屏正方向或反方向，根据设备重力感应器自动调整； “landscape”: 横屏正方向或反方向，根据设备重力感应器自动调整。

打开项目 App.vue ，在 onLaunch 生命周期函数中写入以下代码（锁定屏幕方向）：

  1. // 建议使用uni-app条件编译注释包裹(因为非app端不生效且报错)
  2. plus.screen.lockOrientation("portrait-primary")

写在后面

当然，你也可解除锁定，解除锁定屏幕方向后将恢复应用默认的屏幕显示方向（通常为应用打包发布时设置的方向）。

  1. plus.screen.unlockOrientation()

发表评论

表情：
评论列表 （有 0 条评论，653人围观）

还没有评论，来说两句吧...

相关阅读