博客

uniAPP实现单页面横竖屏切换

最近在用uniapp开发，发现官方文档只能全局配置横竖屏切换，找了些文档，最终实现了效果

一、官方全局设置

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



在pages.json中添加配置：

"globalStyle": {
        // ...
		"pageOrientation": "auto"
	},

此方法可以配置全部页面横竖屏切换（切换时有rpx坑，尽量使用 百分比布局 和 px , rem）

二、实现某个页面横竖屏切换，其他页面竖屏显示

1.在manifest.json中添加配置

	"orientation" : [
		//竖屏正方向
		"portrait-primary",
		//竖屏反方向
		"portrait-secondary",
		//横屏正方向
		"landscape-primary",
		//横屏反方向
		"landscape-secondary",
		//自然方向
		"default"
	]

Screen.lockOrientation()用法

2.在需要横竖屏切换的页面

在onload中加

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

在onUnload中加

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

注：// #ifdef APP-PLUS 与 // #endif 是让代码在app生效，解决

plus is not defined

的报错

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

在onload中加

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

在onUnload中加

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

注：这一步可在第二步完成后手机调试下，如果不想横屏的页面也可切换，再加这段代码