学无先后,达者为师

网站首页 编程语言 正文

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

作者:沧海龙腾LV 更新时间: 2024-02-28 编程语言

实现横竖屏方法:

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

完!!!

原文链接:https://ly9527.blog.csdn.net/article/details/123223436

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新