tab.html：主要控制tab切換的：
<!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" />
<style type="text/css">
.tab-icon {
width: 1.25rem;
height: 1.25rem;
}
.aa {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.aa .mui-icon {
top: 3px;
width: 24px;
padding-top: 0;
padding-bottom: 0;
}
.aa .mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<nav class="mui-bar mui-bar-tab" id="tabBar">
<span class="aa mui-active" href="homePage.html">
<span class="mui-icon"><img class="tab-icon" src="img/diImg/shouyeBlue.png" data-icon="shouye" /></span>
<span class="mui-tab-label" style="color: #358dfd;">首頁</span>
</span>
<span class="aa " href="task.html">
<span class="mui-icon"><img class="tab-icon" src="img/diImg/lsrwGray.png" data-icon="lsrw" /></span>
<span class="mui-tab-label">任務</span>
</span>
<span class="aa" href="wode.html">
<span class="mui-icon"><img class="tab-icon" src="img/diImg/wodeGray.png" data-icon="wode" /></span>
<span class="mui-tab-label">我的</span>
</span>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
var subpages = ['homePage.html', 'task.html', 'wode.html'];
var subpage_style = {
top: '0px',
bottom: '50px',
scrollIndicator: "none", // 當你的界面的內容足夠多的時候，會出現滾動條，這個是隱藏滾動條
};
var status = 1;
// window.addEventListener('die',function(){
// status = 0;
// })
// window.addEventListener('live',function(){
// status = 1;
// })
//創建子頁面，首個選項卡頁面顯示，其它均隱藏；
mui.plusReady(function() {
// 返回桌面
var oldback = mui.back;
mui.back = function() {
var main = plus.android.runtimeMainActivity();
main.moveTaskToBack(false);
};
//獲得當前頁面
var self = plus.webview.currentWebview();
//循環創建子頁面
for (var i = 0; i < subpages.length; i++) {
console.log('111111111111=======》',subpages[i] + 'subpage_style===>'+ subpage_style)
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}
self.append(sub);
}
//當前激活選項卡
var activeTab = subpages[0];
//選項卡點擊事件
mui('.mui-bar-tab').on('tap', '.aa', function(e) {
if(status == 0){
return false;
}
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
console.log('當前顯示哪一個tab頁面')
console.log(targetTab)
// console.log('targetTab'+targetTab)
//隱藏當前;
plus.webview.hide(activeTab);
//顯示目標選項卡
detailPage = plus.webview.getWebviewById(targetTab);
//觸發詳情頁面的newsId事件
mui.fire(detailPage,'newsId');
//打開詳情頁面
mui.openWindow({
id:targetTab
});
// plus.webview.show(targetTab);
//更改當前活躍的選項卡
activeTab = targetTab;
tabChange(subpages.indexOf(targetTab));
});
function tabChange(index) {
mui('.mui-tab-label').each(function(i, a){
if (i === index) {
a.style.color = '#358dfd'
} else {
a.style.color = '#7A7E83'
}
})
mui('.tab-icon').each(function(i, a) {
if (i === index) {
a.src = 'img/diImg/' + a.dataset.icon + 'Blue.png'
} else {
a.src = 'img/diImg/' + a.dataset.icon + 'Gray.png'
}
})
}
});
</script>
</html>
homePage.html：首頁，因為首頁有每次進入刷新的需求
window.addEventListener('newsId',function(event){
window.location.reload(); //頁面更新
});
具體操作如下圖：
親測可用，如果你也遇到同樣是問題，可以采用以下：詳細參考：https://dev.dcloud.net.cn/mui/event/#customevent