mui tab bar 頂部+底部
阿新 • • 發佈：2019-01-22
底部選項卡+div模式
通過DIV模擬一個獨立頁面，通過DIV的顯示、隱藏模擬不同頁面的切換，典型的SPA模式；這種模式適合簡單業務系統，因為每個選項卡內容要寫在一個DIV中， 若邏輯複雜，會導致當前頁面DOM結構繁雜，造成webview響應緩慢，甚至崩潰；因此若系統較複雜，需要下拉重新整理等操作，推薦使用webview模式的選項卡；
核心程式碼：
<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#tabbar"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="#tabbar-with-chat"> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span> <span class="mui-tab-label">訊息</span> </a> <a class="mui-tab-item" href="#tabbar-with-contact"> <span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通訊錄</span> </a> <a class="mui-tab-item" href="#tabbar-with-map"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設定</span> </a> </nav>
<div class="mui-content"> <div id="tabbar" class="mui-control-content mui-active"> <div class="title">這是div模式選項卡中的第1個子頁面.</div> <div class="title">何謂div模式的選項卡？ 其實就是通過DIV模擬一個獨立頁面，通過DIV的顯示、隱藏模擬不同頁面的切換，典型的SPA模式；</div> <div class="title"> 這種模式適合簡單業務系統，因為每個選項卡內容要寫在一個DIV中， 若邏輯複雜，會導致當前頁面DOM結構繁雜，造成webview響應緩慢，甚至崩潰； 因此若系統較複雜，需要下拉重新整理等操作，推薦使用webview模式的選項卡；</div> </div> </div>
底部選項卡+二級選單
操作方式類似與上一種，只是在底部選項卡的基礎上延伸出二級選單
核心程式碼：
<nav class="mui-bar mui-bar-tab "> <a class="mui-tab-item" href="#Popover_0">產品</a> <a class="mui-tab-item" href="#Popover_1">方案</a> <a class="mui-tab-item" href="#Popover_2">新聞</a> </nav> <div class="mui-content"> <div class="mui-content-padded"> <p style="text-indent: 22px;">這是包含二級選單的底部選項卡示例，點選底部選單，會展開顯示對應的二級選單。</p> </div> </div> <div id="Popover_0" class="mui-popover mui-bar-popover"> <div class="mui-popover-arrow"></div> <ul class="mui-table-view"> <li class="mui-table-view-cell"><a href="#">iOS</a> </li> <li class="mui-table-view-cell"><a href="#">Android</a> </li> <li class="mui-table-view-cell"><a href="#">HTML5</a> </li> </ul> </div> </div>
綜合上述兩種模式，如果將內容全部作為div放置於同一個webview中，如果內容較多會造成頁面卡頓，甚至卡死崩潰。綜合PullRefresh的方法，根據實際內容資料可以接入多個webview分別展示內容區域，而將tab bar ,nav bar ,off canvas 作為外部container的容器部件。
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['first.html', 'second.html', 'third.html', 'fourth.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();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
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;
});
//自定義事件，模擬點選“首頁選項卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模擬首頁點選
mui.trigger(defaultTab, 'tap');
//切換選項卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>頂部選項卡+div模式
核心程式碼：
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">待辦公文（8）</a>
<a class="mui-control-item" href="#item2">已辦公文</a>
<a class="mui-control-item" href="#item3">全部公文</a>
</div><div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一個選項卡子項-1
</li>
<li class="mui-table-view-cell">
第一個選項卡子項-2
</li>
<li class="mui-table-view-cell">
第一個選項卡子項-3
</li>
</ul>
</div>
</div>
</div>頂部選項卡+可左右拖動(div)
核心程式碼：
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待辦公文
</a>
<a class="mui-control-item" href="#item2mobile">
已辦公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<!--選中時的下劃線條-->
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<!--對應選單的滑動選擇內容-->
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一個選項卡子項-1
</li>
<li class="mui-table-view-cell">
第一個選項卡子項-2
</li>
<li class="mui-table-view-cell">
第一個選項卡子項-3
</li>
</ul>
</div>
</div>
</div>
</div>
</div>左側選項卡+div模式
核心程式碼：
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<div id="item1" class="mui-control-content mui-active">
</div>
<div id="item2" class="mui-control-content">
</div>
<div id="item3" class="mui-control-content">
</div>
</div>
</div>