MUI tabBar及subPage切换

1.设置导航栏

<header class="mui-bar mui-bar-nav">
  <h1 class="mui-title">标题</h1>
</header>

2.创建底部选项卡,快捷输入mTab

<nav class="mui-bar mui-bar-tab" id="tabBar">
  <a class="mui-tab-item mui-active" id="home.html">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item" id="phone.html">
    <span class="mui-icon mui-icon-phone"></span>
    <span class="mui-tab-label">电话</span>
  </a>
  <a class="mui-tab-item" id="email.html">
    <span class="mui-icon mui-icon-email"></span>
    <span class="mui-tab-label">邮件</span>
  </a>
  <a class="mui-tab-item" id="setting.html">
    <span class="mui-icon mui-icon-gear"></span>
    <span class="mui-tab-label">设置</span>
  </a>
</nav>

3.添加子界面

mui.init({subpages:[{
                    url: 'home.html',
                    id: 'home.html',
                    styles: {top: '44px',bottom: '44px'}
                },
                {
                    url: 'phone.html',
                    id: 'phone.html',
                    styles: {top: '44px',bottom: '44px'}
                },
                {
                    url: 'email.html',
                    id: 'email.html',
                    styles: {top: '44px',bottom: '44px'}
                },
                {
                    url: 'setting.html',
                    id: 'setting.html',
                    styles: {top: '44px',bottom: '44px'}
                }
            ]});

设置属性有很多,根据需要执行设置,需要注意的是,在有naviBar和tabBar的情况下,top和bottom需要设置为44px,用来让开导航和底部选项卡
4.将home作为第一个显示的界面

mui.plusReady(function(){
  var view = plus.webview.getWebviewById('home.html');
  view.show();
})

5.选项卡上的按钮绑定点击事件

mui("#tabBar").on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  var view = plus.webview.getWebviewById(id);
  view.show();
});

6.在实际使用过程中发现,app刚打开时显示的是"设置"界面而不是"首页"
原因在于我们通过getWebviewById时,首页并没有加载出来,所以通过方法拿到的是个空
因此我们这里需要做一个回调
在首页加载完毕之后通知index界面,将首页显示在最前端

首页代码
function plusReady(){
  //拿到index界面,这里index是启动页,所以用getLaunchWebview方法
  var indexWV = plus.webview.getLaunchWebview();
  mui.fire(indexWV,'homeReady');
}
if (window.plus) {
  plusReady()
} else{
  document.addEventListener('plusready',plusReady,false);
}

index代码
function plusReady(){
  window.addEventListener('homeReady', function() {
    var view = plus.webview.getWebviewById('home.html');
    view.show();
  });
}
if (window.plus) {
  plusReady()
} else{
  document.addEventListener('plusready',plusReady,false);
}

demo:https://github.com/TigerCui/DCloudDemo/tree/master/TabBarDemo