1. 先显示第一个，隐藏剩下的；点击时，根据href显示点击的页面，隐藏前一个，其中包含了iframe的兼容方案，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="message.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="setting.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
mui.init();
var index = 0;
var subpages = ['home.html','message.html','setting.html'];
mui.plusReady(function () {
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
var sub = plus.webview.create(
subpages[i], subpages[i], {
top: '45px',
bottom: '50px'
});
if(i > index){
sub.hide();
}
self.append(sub);
}
});
var activeTab = subpages[index];
mui('.mui-bar-tab').on('tap', 'a', function (){
var targetTab = this.getAttribute('href');
if(activeTab == targetTab){
return;
}
if(mui.os.plus){
plus.webview.show(targetTab);
plus.webview.hide(activeTab);
activeTab = targetTab;
} else {
createIframe('.mui-content', {
url: targetTab,
style: {
top: '45px',
bottom: '50px'
}
})
}
});
function createIframe(el,opt) {
var elContainer = document.querySelector('mui-content');
var wrapper = document.querySelector('.mui-iframe-wrapper');
if(!wrapper){
wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
for (var i in opt.style) {
wrapper[i] = opt.style[i];
}
}
var iframe = document.createElement('iframe');
iframe.src = opt.url;
iframe.id = opt.id || opt.url;
iframe.name = opt.id;
wrapper.appendChild(iframe);
elContainer.appendChild(wrapper);
}
</script>
</body>
</html>
2. 采用双webview，需要在manifest.json中：“plus”中配置第一张加载的webview，
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="message.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="setting.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
mui.init();
var subpages = ['home.html','message.html','setting.html'];
var activeTab = subpages[0];
var currentWebview;
var subpage_style = {
top: '45px',
bottom:'50px'
}
mui.plusReady(function () {
currentWebview = plus.webview.currentWebview();
var secondWenview = plus.webview.getSecondWebview();
currentWebview.append(secondWenview);
});
mui('.mui-bar-tab').on('tap', 'a', function() {
var targetTab =this.getAttribute('href');
if(targetTab == activeTab){
return;
}
var targetWebview = plus.webview.getWebviewById(targetTab);
if(!targetWebview){
targetWebview = plus.webview.create(targetTab, targetTab,
subpage_style);
currentWebview.append(targetWebview);
}
targetWebview.show('fade-in', 300);
plus.webview.hide(activeTab);
activeTab = targetTab;
})
</script>
</body>
</html>