守护
守护
  • 发布:2019-05-14 17:09
  • 更新:2022-02-28 17:30
  • 阅读:2007

【报Bug】HbuilderX遇到subpages预加载页面的子页面底部IOS客户端的tabbar显示不全

分类:HBuilderX

HbuilderX版本:Mac 1.9.5.20190505-alpha
运行终端:iPhoneXR
ps:安卓版本测试几个暂时没有发现问题。

测试页面两个:
index.html

<!DOCTYPE html>  
<head>  
<meta charset="utf-8">  
<title>Hello MUI</title>  
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
<link rel="stylesheet" href="css/mui.min.css">  
<link rel="stylesheet" type="text/css" href="css/app.css"/>  
<script src="js/mui.min.js"></script>  
<script>  
mui.init({  
	swipeBack:false,  
	subpages:[{url:'a01.html',id:'a01.html',styles:{top:"0px",bottom:"50px"}}]  
});  
</script>  
</head>  
<body>  
<header class="mui-bar mui-bar-nav">  
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
	<h1 class="mui-title">底部选项卡-div模式</h1>  
</header>  
<nav class="mui-bar mui-bar-tab">  
	<a class="mui-tab-item mui-active" href="#tabbar">  
		<span class="mui-icon mui-icon-home"></span>  
		<span class="mui-tab-label">首页</span>  
	</a>  
	<a class="mui-tab-item" href="#tabbar-with-chat">  
		<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>  
		<span class="mui-tab-label">消息</span>  
	</a>  
	<a class="mui-tab-item" href="#tabbar-with-contact">  
		<span class="mui-icon mui-icon-contact"></span>  
		<span class="mui-tab-label">通讯录</span>  
	</a>  
	<a class="mui-tab-item" href="#tabbar-with-map">  
		<span class="mui-icon mui-icon-gear"></span>  
		<span class="mui-tab-label">设置</span>  
	</a>  
</nav>  
</body>  
</html>

预加载子页面:a01.html

<!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.min.css" rel="stylesheet" />  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
	mui.init();  
</script>  
</head>  
<body>  
<header class="mui-bar mui-bar-nav">  
<h1 class="mui-title">标题</h1>  
</header>  
<div class="mui-content">  
	测试  
</div>  
</body>  
</html>

使用HbuilderX打包运行的底部导航显示为下图:

使用Hbuilder打包运行的底部导航显示为下图:

2019-05-14 17:09 负责人:无 分享
已邀请:
守护

守护 (作者)

请问dcloud技术iPhonex系列如何解决此问题,着急上线啊!

DCloud_IOS_XTY

DCloud_IOS_XTY

你这两页面测试没问题,请提供完整的demo

  • 守护 (作者)

    好的,附件已上传。我是在iPhonexR上测试的。Mac版本的hbuilderX最新版本。


    2019-05-15 10:22

守护

守护 (作者)

附件为测试demo。

DCloud_IOS_XTY

DCloud_IOS_XTY

这个是因为webview会自动避开下边的home区域,可以在index.html中的修改下viewport 来避免该问题

<meta name="viewport"   content="... viewport-fit=cover">
  • 守护 (作者)

    果然可以了,但是请问,其它子页面不需要添加这个设置吗?


    2019-05-15 11:19

  • DCloud_IOS_XTY

    回复 守护: 如果和状态栏或者home区域有重合时,不想自动避开需要添加


    2019-05-15 15:06

  • 胡虎

    这段代码加了后,底部留白更大了,本来是上下各有一点留白;


    2021-10-18 10:08

zkztceo888

zkztceo888

加了这个还是不行啊,程序关闭后第一次启动的时候任然会出现这个,测试机型 iPhone 7plus,谢谢!

  • 容若思雪

    同样被这个问题困扰。现在是2021年4月16日14:02:34


    2021-04-16 14:02

容若思雪

容若思雪 - 奥利给

同样被这个问题困扰。现在是2021年4月16日15:05:07

1***@qq.com

1***@qq.com

请问大家这个问题解决了吗,22年碰到这个问题了

  • 1***@qq.com

    参考:https://www.linlinan.cn/post/106


    2022-02-28 18:28

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