mui 控制旋轉螢幕方向

多毛大叔愛蘿莉發表於2018-07-03
UI

在用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

相關文章