mui底部选项卡

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作:
webview API文档

创建webview

plus.webview.create( url, id, styles, extras )

webview的显示

plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras )

隐藏Webview

plus.webview.hide( id_wvobj, aniHide, duration, extras );

获取当前窗口的WebviewObject对象

plus.webview.currentWebview()

获取当前窗口的WebviewObject对象ID

plus.webview.currentWebview().id

查找指定标识的WebviewObject

plus.webview.currentWebview(id)  //指定页面ID

创建并打开Webview窗口

   plus.webview.open( url, id, styles, aniShow, duration, showedCB )

在编译器中创建main.html,news.html,set.html
输入快捷键mheader按回车，在输入mtab按回车，整理代码如下:

        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title" >首页</h1>
        </header> 
        <nav class="mui-bar mui-bar-tab">
            <div class="mui-tab-item mui-active" hr='main.html'>
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </div>
        
            <div class="mui-tab-item" hr='new.html'>
                 <span class="mui-icon mui-icon-chatboxes"></span>
                <span class="mui-tab-label">消息</span>
            </div>
            <div class="mui-tab-item" hr='set.html'>
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </div>
        </nav>

准备工作做好，开始写页面切换逻辑
1.创建页面，首个选项卡页面显示，其他选项卡页面隐藏

 var views=['main.html','new.html','set.html']
    views_style=[{top:'0px',bottom: '51px'},{top:'45px',bottom: '51px'},{top:'45px',bottom: '51px'}]
     mui.plusReady(function(){
        var self = plus.webview.currentWebview(); //获取当前页面对象
        for(var i = 0 ; i<views.length ; i++){
               var sub = plus.webview.create(views[i],views[i],views_style[i]); //创建页面
                if(i>0){
                    sub.hide()  //隐藏页面
                }                   
                self.append(sub) //显示页面apend()方法在html5plus文档中没有提到，这里的这个方法是将webview对象填充到窗口的方法。           
     }      
 })

执行之后main页面显示出来，但是点击选项卡按钮，页面无法切换，因为我们还没有给底部选项卡做点击监听事件，我们会发现头部导航栏的首页两个字没有显示出来，当我们把top:'0px'改成 top：45px之后又能显示，这设计到mui的一个潜规则，父子结构的页面子页面会比父页面层级高
2.选项卡添加点击事件

 var activeTab=views[0]; //激活选项卡 
var title= document.querySelector('.mui-title') 
 mui(".mui-bar-tab").on('tap','div',function(){
     var tab = this.getAttribute('hr'); //  获取点击页面ID
     if(activeTab==tab){  
           return;
     }                
     plus.webview.show(tab); //    显示点击webview   
     plus.webview.hide(activeTab);   //隐藏当前 webview  
     title.innerHTML=this.querySelector('.mui-tab-label').innerHTML
    activeTab=tab;
 })

this.getAttribute('hr')获取该按钮的hr属性的属性值