uni-app横屏设置_uniapp 横屏

1.官网全局设置

https://uniapp.dcloud.io/collocation/pages?id=globalstyle

"globalStyle": {
	"pageOrientation": "auto"
}
1
2
3

2.某个页面横竖屏设置

在manifest.json中添加配置：

"orientation" : [
	// 竖屏正方向
	"portrait-primary",
	// 竖屏反方向
	"portrait-secondary",
	// 横屏正方向
	"landscape-primary",
	// 横屏反方向
	"landscape-secondary",
	//自然方向
	"default"
]
1
2
3
4
5
6
7
8
9
10
11
12

3.需要横竖屏切换的页面

onLoad（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('default'); 
	// #endif

},
onUnload（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
}
1
2
3
4
5
6
7
8
9
10
11

4.不需要横竖屏切换的页面

onLoad（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif

},
onUnload（）{
	// #ifdef APP-PLUS
	   plus.screen.lockOrientation('portrait-primary'); 
	// #endif
}
1
2
3
4
5
6
7
8
9
10
11

5.强制横屏

mounted() {
	// plus.screen.lockOrientation( 'landscape-secondary');
	plus.screen.lockOrientation( 'landscape-primary');
}
1
2
3
4

Screen.lockOrientation()用法：
https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/lockOrientation