mui 控制旋轉屏幕方向
版權聲明：本文為多毛大叔愛蘿莉原創，如需轉載請注明出處！ https://blog.csdn.net/qq_37121488/article/details/80748823
在用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)- 1
- 2
- 3
- 4
離開頁面時也要旋轉回原來的樣子：
plus.screen.unlockOrientation(); // 取消旋轉屏幕 plus.screen.lockOrientation("portrait-primary"); // 或者使用把屏幕改變成豎屏正方向- 1
- 2
如果要打包成app 需要在manifest.json中點擊你讓他旋轉的位置。如下：
點擊你需要選擇的方位。在打包 上邊的效果就可以實現了。
這樣就可以實現頁面進入旋轉屏幕離開屏幕恢復的效果。
參考api：http://www.html5plus.org/doc/zh_cn/device.html