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中點擊你讓他旋轉的位置。以下：

點擊你須要選擇的方位。在打包 上邊的效果就能夠實現了。

這樣就能夠實現頁面進入旋轉屏幕離開屏幕恢復的效果。
參考api：http://www.html5plus.org/doc/zh_cn/device.html