在用mui做app的時(shí)候，要做一個(gè)大數(shù)據(jù)統(tǒng)計(jì)需要橫屏顯示表格。所以去查了下資料。在這里記錄一下。
我要做的是，在a頁面是豎屏，在a頁面點(diǎn)擊到子頁面。子頁面要變成橫屏。這種效果。
在html5+ 的api中有個(gè)鎖定屏幕方向的方法是 plus.screen.lockOrientation 可以幫助我們解決屏幕旋轉(zhuǎn)問題。
說明
鎖定屏幕方向后屏幕只能按鎖定的屏幕方向顯示，關(guān)閉當(dāng)前頁面后仍然有效。 可再次調(diào)用此方法修改屏幕鎖定方向或調(diào)用unlockOrientation()方法恢復(fù)到應(yīng)用的默認(rèn)值。
參數(shù)
參數(shù)只有一個(gè)。鎖定屏幕方向可取以下值： "portrait-primary": 豎屏正方向； "portrait-secondary": 豎屏反方向，屏幕正方向按順時(shí)針旋轉(zhuǎn)180°； "landscape-primary": 橫屏正方向，屏幕正方向按順時(shí)針旋轉(zhuǎn)90°； "landscape-secondary": 橫屏方向，屏幕正方向按順時(shí)針旋轉(zhuǎn)270°； "portrait": 豎屏正方向或反方向，根據(jù)設(shè)備重力感應(yīng)器自動調(diào)整； "landscape": 橫屏正方向或反方向，根據(jù)設(shè)備重力感應(yīng)器自動調(diào)整；
項(xiàng)目demo
剛開始進(jìn)入頁面時(shí)我的需求是需要旋轉(zhuǎn)成橫屏：
setTimeout(function () {
plus.nativeUI.toast('該頁面需要橫屏查看'); // 友好的提示一下
plus.screen.lockOrientation("landscape-primary") // 把屏幕方向改變成橫屏正方向
}, 1000)
離開頁面時(shí)也要旋轉(zhuǎn)回原來的樣子：
plus.screen.unlockOrientation(); // 取消旋轉(zhuǎn)屏幕
plus.screen.lockOrientation("portrait-primary"); // 或者使用把屏幕改變成豎屏正方向
如果要打包成app 需要在manifest.json中點(diǎn)擊你讓他旋轉(zhuǎn)的位置。如下：
點(diǎn)擊你需要選擇的方位。在打包 上邊的效果就可以實(shí)現(xiàn)了。
這樣就可以實(shí)現(xiàn)頁面進(jìn)入旋轉(zhuǎn)屏幕離開屏幕恢復(fù)的效果。
參考api：http://www.html5plus.org/doc/zh_cn/device.html
