uniAPP实现单页面横竖屏切换

 

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

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

1.本站默认解压密码为:xiaoqingtai.com
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » uniAPP实现单页面横竖屏切换

发表评论