在用mui做app的時候，要做一個大數(shù)據(jù)統(tǒng)計需要橫屏顯示表格。所以去查了下資料。在這里記錄一下。

我要做的是，在a頁面是豎屏，在a頁面點擊到子頁面。子頁面要變成橫屏。這種效果。
在html5+ 的api中有個鎖定屏幕方向的方法是 plus.screen.lockOrientation 可以幫助我們解決屏幕旋轉(zhuǎn)問題。

說明

鎖定屏幕方向后屏幕只能按鎖定的屏幕方向顯示，關(guān)閉當(dāng)前頁面后仍然有效。 可再次調(diào)用此方法修改屏幕鎖定方向或調(diào)用unlockOrientation()方法恢復(fù)到應(yīng)用的默認(rèn)值。

參數(shù)

參數(shù)只有一個。鎖定屏幕方向可取以下值： "portrait-primary": 豎屏正方向； "portrait-secondary": 豎屏反方向，屏幕正方向按順時針旋轉(zhuǎn)180°； "landscape-primary": 橫屏正方向，屏幕正方向按順時針旋轉(zhuǎn)90°； "landscape-secondary": 橫屏方向，屏幕正方向按順時針旋轉(zhuǎn)270°； "portrait": 豎屏正方向或反方向，根據(jù)設(shè)備重力感應(yīng)器自動調(diào)整； "landscape": 橫屏正方向或反方向，根據(jù)設(shè)備重力感應(yīng)器自動調(diào)整；

項目demo

剛開始進入頁面時我的需求是需要旋轉(zhuǎn)成橫屏：

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

離開頁面時也要旋轉(zhuǎn)回原來的樣子：

plus.screen.unlockOrientation(); // 取消旋轉(zhuǎn)屏幕
plus.screen.lockOrientation("portrait-primary"); // 或者使用把屏幕改變成豎屏正方向

如果要打包成app 需要在manifest.json中點擊你讓他旋轉(zhuǎn)的位置。如下：

QQ截圖20180619143326.png

這樣就可以實現(xiàn)頁面進入旋轉(zhuǎn)屏幕離開屏幕恢復(fù)的效果。
參考api：http://www.html5plus.org/doc/zh_cn/device.html