在用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中点击你让他旋转的位置。如下:
点击你需要选择的方位。在打包 上边的效果就可以实现了。
这样就可以实现页面进入旋转屏幕离开屏幕恢复的效果。
参考api:http://www.html5plus.org/doc/zh_cn/device.html