云端的风
云端的风
  • 发布:2019-08-21 18:04
  • 更新:2019-08-21 18:53
  • 阅读:728

【报Bug】openWindow和强制横屏竖屏之间的问题

分类:HBuilderX

最新的hbuilderX 5+App mui项目 安卓

点击按钮 使用openWindow打开新页面后,

在新页面中有另一个按钮点击后 强制横屏plus.screen.lockOrientation("landscape-primary");

还有一个按钮点击后恢复竖屏plus.screen.lockOrientation("portrait-primary");

(之所以有横屏和竖屏主要是为了让用户横屏查看图表的功能。)

之后点返回回到上一页。

然后再点击这个按钮openWindow打开新页面 这个页面的宽变成了高,高变成了宽。由于高变成了宽,内容只占了手机上半屏,下半屏是openWindow之前那个页面的内容。 宽变成了高,导致横向变得很宽,超出了手机屏幕。

就是说openWindow和强制横屏竖屏之间存在问题。

2019-08-21 18:04 负责人:无 分享
已邀请:
云端的风

云端的风 (作者)

重新建了个项目 并没有发现这个问题,但是一旦加上这段代码
window.addEventListener("orientationchange", function (){
if (window.orientation==90){
plus.navigator.setFullscreen(true);
}else{
plus.navigator.setFullscreen(false);
}
});

就会出现我说的这个问题。

这段代码是想监听横屏和竖屏 如果横屏就把上方的状态栏给隐藏掉,竖屏就显示出来 加上这段代码就会出BUG

云端的风

云端的风 (作者)

<!doctype html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<title></title>  
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
		<link href="css/mui.css" rel="stylesheet" />  
	</head>  
  
	<body>  
		<script src="js/mui.js"></script>  
		<script src="js/jquery-3.3.1.min.js"></script>  
		<script type="text/javascript">  
			mui.init()  
		</script>  
		<button id="back">返回</button>  
		<button id="b1">全屏</button>  
		<button id="b2">取消</button>  
		<ul>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
			<li>我是new_file.html</li>  
		</ul>  
	</body>  
	<script>  
		$(function(){  
			mui.plusReady(function () {  
				$("#back").on("tap",function(){  
					mui.back();  
				})  
			    $("#b1").on("tap",function(){  
			    	plus.screen.lockOrientation("landscape-primary");  
			    })  
				$("#b2").on("tap",function(){  
					plus.screen.lockOrientation("portrait-primary");  
				})  
				window.addEventListener("orientationchange", function (){  
					if (window.orientation==90){  
						plus.navigator.setFullscreen(true);  
					}else{  
						plus.navigator.setFullscreen(false);  
					}  
				});  
			})  
		})  
	</script>  
</html>  

云端的风

云端的风 (作者)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
	<script src="js/jquery-3.3.1.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
      	mui.init();  
    </script>  
</head>  
<body>  
	<button id="b1">打开新页面</button>  
	<ul>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
		<li>我是index.html</li>  
	</ul>  
	<script>  
		$(function(){  
			$("#b1").on("tap",function(){  
				var href = "new_file.html";  
				var id = "new_file.html";  
				mui.openWindow(href,id);  
			})  
		})  
	</script>  
</body>  
</html>
云端的风

云端的风 (作者)

我注释了window.addEventListener("orientationchange", function (){
if (window.orientation==90){
plus.navigator.setFullscreen(true);
}else{
plus.navigator.setFullscreen(false);
}
}); 这段代码

然后在切换全屏后增加plus.navigator.setFullscreen(true); 取消全屏后增加plus.navigator.setFullscreen(false);

也就是改成了$("#b1").on("tap",function(){
plus.screen.lockOrientation("landscape-primary");
plus.navigator.setFullscreen(true);
})
$("#b2").on("tap",function(){
plus.screen.lockOrientation("portrait-primary");
plus.navigator.setFullscreen(false);
})
之后,再取消全屏和全屏时也会出现异常,就是在没全屏或没取消全屏之前先执行了状态栏的改变。也导致了页面显示不全

最后 改成了
$("#b1").on("tap",function(){
plus.screen.lockOrientation("landscape-primary");
setTimeout(function(){plus.navigator.setFullscreen(true)},500);
})
$("#b2").on("tap",function(){
plus.screen.lockOrientation("portrait-primary");
setTimeout(function(){plus.navigator.setFullscreen(false)},500);
})

让状态栏的改变延迟500毫秒执行,目前暂时解决了这个问题。 希望可以得到修复,也许是我哪里写的不对,请大佬讲解,谢谢。

云端的风

云端的风 (作者)

这个问题确实只在openWindow时才会出现,如果是location.href直接跳转的话,不存在这个问题,监听修改状态栏也可以用

该问题目前已经被锁定, 无法添加新回复