想請問底部選項卡在手機無法顯示的問題

分类：MUI

大家好！我是來自台灣的使用戶。無意間發現了 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>

2015-12-16 10:40 负责人:无分享

4 个回复

XIAOXIAOBEI

你是ios的才会这样吧，而且是云打包出现的，我也有同样的问题，底部选项卡没有了，好像云端打包昨天出现的这个现象，原来都没问题的，希望 DCloud的大牛们帮们看一下

2015-12-16 10:51 分享

AdlerLei (作者)

我使用ios和android手機都是一樣的情況，不過我沒有使用雲打包喔，我是在HBuilder的開發編輯器中直接使用手機調試。（運行 -> 手機運行）。

2015-12-16 11:00 分享

Trust - 少说废话

加载子页面的部分，你只设置了top的值，也就是顶部栏的空余高度。还需要设置bottom的值，也就是给底部选项卡预留高度。头部默认是44px，底部默认是50px。
代码如下：

mui.init({  
    subpages:[{  
      url:'list.html',  
      id:'list.html',  
      styles:{  
        top:'45px',//mui标题栏默认高度为45px；  
        bottom:'50px'//底部栏的高度默认为50px；  
      }  
    }]  
  });

2015-12-16 11:07 分享

AdlerLei (作者)

你好，我已將代碼修改為

<!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:'50px'//默认为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>

但是在手機上我的mtab還是一樣無法顯示。附上圖片參考一下。預覽模式都正常，但手機調試還是無法顯示。