```这幅图上面的导航是用Mui的nav做的，是父页面，点击上面的导航相应的webview显示，
这幅图是子页面，偶尔点击上面的导航会出现以下情况，子页面并不是按照父页面指定的top:50px，而是子页面弹上去遮住了父页面的导航栏。
代码如下：
<!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" />
<link href="http://at.alicdn.com/t/font_1451898475_6755753.css" rel="stylesheet" />
<script type="text/javascript" charset="UTF-8">
mui.init();
</script>
<style type="text/css">
.mui-bar {
background-color: #E15D50;
height: 50px;
line-height: 50px;
box-shadow: initial;
z-index: 999;
}
.mui-bar-tab {
top: 0;
bottom: initial;
}
.mui-bar-tab>.mui-tab-item.mui-active {
color: #fff;
font-weight: bold;
}
.mui-bar-tab>.mui-tab-item {
color: #fff;
}
.loading {
width: 100%;
height: 50px;
overflow: hidden;
margin-top: 50px;
text-align: center;
font-size: 14px;
color:#666;
line-height: 50px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="recom.html">
<span class="mui-tab-label">推荐</span>
</a>
<a class="mui-tab-item" href="kor.html">
<span class="mui-tab-label">韩语</span>
</a>
<a class="mui-tab-item" href="eng.html">
<span class="mui-tab-label">英语</span>
</a>
<a class="mui-tab-item" href="yy.html">
<span class="mui-tab-label">粤语</span>
</a>
<a class="mui-tab-item" href="jap.html">
<span class="mui-tab-label">日语</span>
</a>
</header>
<!--<div class="loading">
正在加载......
</div>-->
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
var subpages = ['recom.html', 'kor.html', 'eng.html', 'yy.html', 'jap.html'];
var subpage_style = {
top: '50px',
bottom: '0'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
// 在Android5以上设备，如果默认没有开启硬件加速，则强制设置开启
if (!plus.webview.defauleHardwareAccelerated() && parseInt(plus.os.version) >= 5) {
subpage_style.hardwareAccelerated = true;
}
var ws = plus.webview.currentWebview();
var wvs = plus.webview.all();
for (var i = 0; i < wvs.length; i++) {
console.log("webview" + i + ": " + wvs[i].getURL());
}
//点击返回按钮直接弹出是否退出应用
mui.back = function() {
var selectshow = plus.webview.create("select.html", 'select');
selectshow.show("slide-in-right", 300);
plus.webview.close(ws);
}
var self = plus.webview.currentWebview();
for (var i = 0; i < 5; 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];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
if (mui.os.ios || aniShow[targetTab]) {
plus.webview.show(targetTab);
} else {
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');
});
</script>
</body>
</html>
请大神帮帮忙，看看是哪里有问题~ 
superatc
- 发布：2016-01-08 03:21
- 更新：2017-03-09 22:01
- 阅读：4403
