uni-app手机横屏后页面错乱解决办法

一、h5切换横竖屏文档

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
},

小知识： 强制横屏 和 强制竖屏

plus.screen.lockOrientation('portrait-primary');竖屏

plus.screen.lockOrientation('landscape-primary');横屏