mui中如何使用tab來切換子頁面 mui-bar, mui-bar-tab

mui是前端框架可是不少人用它寫移動端 那麼mui底部切換是怎麼作到的呢?html

如何點擊某個tab來切換不一樣的頁面?前端

解答:web

1首先咱們須要引入mui框架的底部tab元素 代碼以下前端框架

<!--table菜單開始-->
        <nav class="mui-bar mui-bar-tab">
            <a href="index.html" class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a href="hotspot.html" class="mui-tab-item">
                <span class="mui-icon mui-icon-paperplane"></span>
                <span class="mui-tab-label">熱點</span>
            </a>
            
            <a href="message.html" class="mui-tab-item">
                <span class="mui-icon mui-icon-chat"></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a href="center.html" class="mui-tab-item" >
                <span class="mui-icon mui-icon-person"></span>
                <span class="mui-tab-label">個人</span>
            </a>
        </nav>app

<!--table菜單結束-->框架

注意:每一個a標籤都要寫目標路徑的位置ide

接着就是js文件了函數

//mui加載框架元素成功以後執行此函數ui

mui.plusReady(function(){
               //四個頁面的路徑依次順序排列
    var subpages=['index.html','hotspot.html','message.html','center.html'];
               //除了主頁面其他頁面的樣式
               var subpage_style={
                   top:'0px',
                   bottom:'51px'
               }
               //主頁面樣式  底部不須要漏出來
               var index_style={
                   top:'0px',
                   bottom:'0px'
               }
               //獲取當前第一個頁面
               var activeTab=subpages[0];
               //給底部table 選項卡添加單機監聽事件
           mui('.mui-bar-tab').on('tap','a',function(e){
               //獲取目標路徑
               var targetTab=this.getAttribute("href");
            //若是當前地址是index.html目標地址也是index.html
            if(targetTab==activeTab){
                   return ;
               }
            //獲取當前窗口對象
               var self=plus.webview.currentWebview();
              //若是是第一個頁面那麼選擇 第一個頁面的樣式 第一個頁面底部有選項卡
              if(targetTab==subpages[0]){    
                  //主頁面 index_style
              var sub=plus.webview.create(targetTab,targetTab,index_style);
              }else{
                  //主頁面 其他頁面的樣式 subpage_style
              var sub=plus.webview.create(targetTab,targetTab,subpage_style);
               }
              //把子頁面添加到當前窗口對象裏
               self.append(sub);
               //關閉當前窗口裏面已經展現的頁面
               plus.webview.hide(activeTab);
               //要打開的頁面賦值給當前頁面留着下次使用
               activeTab=targetTab;
           })


this

}

這樣就能夠作到來回切換底部選項卡了

 

 

 

相關文章
相關標籤/搜索