UNI-APP,设置某个页面横屏后,恢复竖屏,返回再次进入其他页面时,页面内容放大错乱

实现横竖屏方法:

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

在需要横屏的页面添加如下代码,即可实现横竖屏切换。

onLoad() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('landscape-primary');
    // #endif
},


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

注意

如果只是简单的添加上述横屏代码,就会出现如标题中描述的问题:

1、初次进入横屏页面,显示正常,返回再次进入,页面内容放大。并且没有全屏,露出上一页内容。

2、初次进入横屏页面,显示正常,返回,进入其他页面(竖屏),页面内容放大

此问题的解决办法:

如果是非V3模式编译,安卓正常、ios出问题。解决:进入需要横屏的页面时,不要onload就横屏,写个定时器延迟500ms再用。

更新到v3模式后,安卓出问题,ios正常,这很奇怪。定时器延迟500ms不管用了,解决:定时器延时1200ms。

总之,设置横屏时需要添加一个延时操作。可以在进入横屏页面后,写个定时器 1.2s之后再执行横屏操作。

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

完!!!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值