mui底部选项卡切换页面的两种模式

最新推荐文章于 2021-03-20 14:28:42 发布

小屁孩大帅-杨一凡

最新推荐文章于 2021-03-20 14:28:42 发布

阅读量1.2k

点赞数

分类专栏：前端技术

前端技术专栏收录该内容

9 篇文章 1 订阅

订阅专栏

两种模式的区别：

DIV模式是将所有子页面的内容，分别放置到主页不同的DIV中，当我们点击主页的不同选项卡时，切换不同DIV的显示。这种方式显然要比加载子页的方式快很多，但是也显然不能承载很多布局的页面，毕竟要在一个主页中写入所有子页面的代码，显得不太现实。

而WebView模式则是将所有子页面都写入到不同的子页面中，再通过主页连接到一起，点击不同的选项卡，加载不同的子页面，显然这种方式更符合我们的预期和要求。

1.底部选项卡切换(DIV模式)：


 
 
   
   
    
    
   
   
   
   
    
    
     
             <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">底部选项卡切换(Div模式)</h1>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             </header>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             <nav 
     
     class=
     
     "mui-bar mui-bar-tab">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <a 
     
     class=
     
     "mui-tab-item mui-active" href=
     
     "#page1">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-icon mui-icon-home"></span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-tab-label">首页</span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <a 
     
     class=
     
     "mui-tab-item" href=
     
     "#page2">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-icon mui-icon-phone"></span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-tab-label">电话</span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <a 
     
     class=
     
     "mui-tab-item" href=
     
     "#page3">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-icon mui-icon-email"></span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-tab-label">邮件</span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <a 
     
     class=
     
     "mui-tab-item" href=
     
     "#page4">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-icon mui-icon-gear"></span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     <span 
     
     class=
     
     "mui-tab-label">设置</span>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             </nav>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             <div 
     
     class=
     
     "mui-content">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <div id=
     
     "page1" 
     
     class=
     
     "mui-control-content mui-active">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     这是第一个页面
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <div id=
     
     "page2" 
     
     class=
     
     "mui-control-content">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     这是第二个页面
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <div id=
     
     "page3" 
     
     class=
     
     "mui-control-content">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     这是第三个页面
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 <div id=
     
     "page4" 
     
     class=
     
     "mui-control-content">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     这是第四个页面
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             </div>

底部选项卡切换(WebView模式)：


 
 
   
   
    
    
   
   
   
   
    
    
     
             <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" id=
     
     "title">首页<
     
     /h1>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             </header>
    
    
   
   

   
   
    
    
   
   
   
   
    
            
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     <nav class="mui-bar mui-bar-tab">
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-icon mui-icon-home">
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-tab-label">首页
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     <a class="mui-tab-item" href="b.html">
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-icon mui-icon-email">
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-tab-label">消息
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     <a class="mui-tab-item" href="c.html">
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-icon mui-icon-contact">
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-tab-label">通讯录
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     <a class="mui-tab-item" href="d.html">
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-icon mui-icon-gear">
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     <span class="mui-tab-label">设置
     
     </span>
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     </a>
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     </nav>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
            
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     //js部分
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var subpages = [
     
     'a.html', 
     
     'b.html', 
     
     'c.html', 
     
     'd.html'];
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var subpage_style = {
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     top: 
     
     '45px',
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     bottom: 
     
     '51px'
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             };
    
    
   
   

   
   
    
    
   
   
   
   
    
                
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var aniShow = {};
    
    
   
   

   
   
    
    
   
   
   
   
    
                
    
    
   
   

   
   
    
    
   
   
   
   
    
             
     
     //创建子页面，首个选项卡页面显示，其它均隐藏；
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             mui.plusReady(
     
     function() {
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     var self = plus.webview.currentWebview();
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     for (
     
     var i = 
     
     0; i < 
     
     4; i++) {
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     var temp = {};
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     if (i > 
     
     0) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                         sub.hide();
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     }
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     /* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                  */
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     self.append(sub);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             });
    
    
   
   

   
   
    
    
   
   
   
   
    
             
     
     //当前激活选项
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var activeTab = subpages[
     
     0];
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     var title = 
     
     document.getElementById(
     
     "title");
    
    
   
   

   
   
    
    
   
   
   
   
    
            
     
     //选项卡点击事件
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
             mui(
     
     '.mui-bar-tab').on(
     
     'tap', 
     
     'a', 
     
     function(e) {
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     var targetTab = 
     
     this.getAttribute(
     
     'href');
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     if (targetTab == activeTab) {
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     return;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     //更换标题
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 title.innerHTML = 
     
     this.querySelector(
     
     '.mui-tab-label').innerHTML;
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     //显示目标选项卡
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     //若为iOS平台或非首次显示，则直接显示
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     if(mui.os.ios||aniShow[targetTab]){
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     plus.webview.show(targetTab);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
     
     else{
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     //否则，使用fade-in动画，且保存变量
    
    
   
   

   
   
    
    
   
   
   
   
    
                    
     
     var temp = {};
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     temp[targetTab] = 
     
     "true";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     mui.extend(aniShow,temp);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                     plus.webview.show(targetTab,
     
     "fade-in",
     
     300);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 }
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     //隐藏当前;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 plus.webview.hide(activeTab);
    
    
   
   

   
   
    
    
   
   
   
   
    
                
     
     //更改当前活跃的选项卡
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
                 activeTab = targetTab;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
         });