uniapp 解决切换横竖屏后内容错乱的问题

前言：最近有个需要横屏签名的需求，看了很多博客写的都是调用plus的方法，但是在进入横屏签名页面返回后，再跳转下一级页面会出现内容错乱的问题。一、h5切换横竖屏文档plus.screen.lockOrientation(‘orientation’);: ( String ) 必选要锁定的屏幕方向值plus.screen.unlockOrientation(); //解除锁定屏幕方向锁定屏幕方向可

Frontend-Lsj

3342人浏览 · 2020-11-19 15:26:05

Frontend-Lsj · 2020-11-19 15:26:05 发布

前言：最近有个需要横屏签名的需求，看了很多博客写的都是调用plus的方法，但是在进入横屏签名页面返回后，再跳转下一级页面会出现内容错乱的问题。

一、h5切换横竖屏文档

plus.screen.lockOrientation(‘orientation’);: ( String ) 必选要锁定的屏幕方向值
plus.screen.unlockOrientation(); //解除锁定屏幕方向
锁定屏幕方向可取以下值：

"portrait-primary": 竖屏正方向；
"portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°；
"landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°；
"landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°；
"portrait": 竖屏正方向或反方向，根据设备重力感应器自动调整；
"landscape": 横屏正方向或反方向，根据设备重力感应器自动调整；

二、实现横竖屏

1、进入签名页面，实现横屏：

onLoad(){

	#ifdef APP-PLUS
	plus.screen.unlockOrientation(); //解除锁定屏幕方向
	plus.screen.lockOrientation('landscape-primary');
	#endif
	
}

2、签名完成后返回页面，恢复竖屏：

onShow() {

	#ifdef APP-PLUS
	plus.screen.unlockOrientation();//解除锁定屏幕方向
	plus.screen.lockOrientation('portrait-primary');
	#endif	
		
}

三、解决横竖屏后内容错乱问题

在进入横屏页面后，写个定时器 1.2s之后再执行横屏操作。

onLoad() {
	#ifdef APP-PLUS
		uni.showLoading({
			title:"加载中..."
		})
		setTimeout(()=>{
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation('landscape-primary');
			uni.hideLoading();
		},1200)
	#endif
},