div模式
DIV模式是將所有子頁面的內容，分別放置到主頁不同的DIV中，當我們點擊主頁的不同選項卡時，切換不同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模式
WebView模式則是將所有子頁面都寫入到不同的子頁面中，再通過主頁連接到一起，點擊不同的選項卡 ，加載不同的子頁面，顯然這種方式更符合我們的預期和要求。
此模式只能在模擬器和真機上運行，
<body>
<div class="mui-content">
</div>
<nav id="bar" class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="activity/actlist.html" data-id="task">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">待辦</span>
</a>
<a class="mui-tab-item" href="work.html" data-id="work">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">工作</span>
</a>
<a class="mui-tab-item" href="my/homepage.html" data-id="mysetting">
<span class="mui-icon mui-icon-gear-filled"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
</body>
js部分
<script src="../js/mui.min.js"></script>
<script>
mui.init();
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var current = '';
var styles = {
top: '0',
bottom: '51px'
};
var tabsConfig = {
task: {
url: 'activity/actlist.html',
styles: styles,
default: true
},
work: {
url: 'work.html',
styles: styles
},
mysetting: {
url: 'my/homepage.html',
styles: styles
}
};
var tabs = {};
for (id in tabsConfig) {
tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles);
if (tabsConfig[id]['default']) {
self.append(tabs[id]);
current = id;
}
}
mui('#bar').on('tap', 'a', function(e) {
if (current == this.dataset.id) {
return;
}
tabs[this.dataset.id].show();
tabs[current].hide();
current = this.dataset.id;
});
});
</script>
參考博客：
MUI框架開發HTML5手機APP(二)–頁面跳轉傳值&底部選項卡切換
一個底部選項卡的實現（webview模式）