MUI tabBar及subPage切换

1.设置导航栏

  
标题

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

  
    
    首页
  
  
    
    电话
  
  
    
    邮件
  
  
    
    设置
  

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