大家好！我是來自台灣的使用戶。無意間發現了 DCloud 覺得很棒！想要學一下研究看看。目前我有一個問題就是我使用了 mh頂部標題欄，在瀏覽器或手機都能夠正常顯示。
但是使用了 mtab 底部選項卡 的時候，在編輯視窗中可以正常顯示，瀏覽器預覽模式也正常，但在手機上卻一直無法顯示出 mtab 的底部選項卡，翻了一下 DCloud 網站發現沒有跟我一樣的案例，不曉得是不是我哪邊出錯了，想要請教一下高手或前輩們能否指點一下。感激不盡！謝謝！下面是我練習的代碼。
//////////////////////////備註：我有使用子頁面，但我把子頁面拿掉也是無法顯示 ...
<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
//mui.init();
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
}]
});
</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">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
</html>
4 个回复
XIAOXIAOBEI
你是ios的才会这样吧，而且是云打包出现的，我也有同样的问题，底部选项卡没有了，好像云端打包昨天出现的这个现象，原来都没问题的，希望 DCloud的大牛们帮们看一下
AdlerLei (作者)
我使用ios和android手機都是一樣的情況，不過我沒有使用雲打包喔，我是在HBuilder的開發編輯器中直接使用手機調試。（運行 -> 手機運行）。
Trust - 少说废话
加载子页面的部分，你只设置了top的值，也就是顶部栏的空余高度。还需要设置bottom的值，也就是给底部选项卡预留高度。头部默认是44px，底部默认是50px。
代码如下：
AdlerLei (作者)
你好，我已將代碼修改為
但是在手機上我的mtab還是一樣無法顯示。附上圖片參考一下。預覽模式都正常，但手機調試還是無法顯示。
Trust
你好，你可以先运行一下helo mui的示例代码。看是否显示正常，如果不正常，那么请联系下他们的客服人员。请加群QQ48255660，在里面联系。
2015-12-16 13:41
AdlerLei (作者)
好的謝謝你
2015-12-16 16:21