mui 控制旋转屏幕方向

在用mui做app的时候，要做一个大数据统计需要横屏显示表格。所以去查了下资料。在这里记录一下。

我要做的是，在a页面是竖屏，在a页面点击到子页面。子页面要变成横屏。这种效果。
在html5+ 的api中有个锁定屏幕方向的方法是 plus.screen.lockOrientation 可以帮助我们解决屏幕旋转问题。

说明

锁定屏幕方向后屏幕只能按锁定的屏幕方向显示，关闭当前页面后仍然有效。 可再次调用此方法修改屏幕锁定方向或调用unlockOrientation()方法恢复到应用的默认值。

参数

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

项目demo

刚开始进入页面时我的需求是需要旋转成横屏：

setTimeout(function () {
        plus.nativeUI.toast('该页面需要横屏查看'); // 友好的提示一下
        plus.screen.lockOrientation("landscape-primary") // 把屏幕方向改变成横屏正方向
    }, 1000)

离开页面时也要旋转回原来的样子：

plus.screen.unlockOrientation(); // 取消旋转屏幕
plus.screen.lockOrientation("portrait-primary"); // 或者使用把屏幕改变成竖屏正方向

如果要打包成app 需要在manifest.json中点击你让他旋转的位置。如下：

QQ截图20180619143326.png
点击你需要选择的方位。在打包 上边的效果就可以实现了。

这样就可以实现页面进入旋转屏幕离开屏幕恢复的效果。
参考api：http://www.html5plus.org/doc/zh_cn/device.html