实现横竖屏方法:
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
},
完!!!