问题描述：我的app中用了侧滑导航，主页面是main页，main页中包含整个app的头和底部，底部是选项卡，侧滑导航中链接了两个不同的list页面分别要嵌套在main页中。在安卓端的时候，点击侧滑导航中的链接，均可以正常切换到对应的list页面中，但是在ios 端，点击导航链接，切换到list页面也正常，不过main页面的头和底部都消失了，不知道这是什么问题？
//main页面
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<style>
html,
body {
background-color: #FFFFFF;
}
.nav_bar {
border-top: solid 1px #F8F8F8;
}
.mui-bar {
background-color: #F8F8F8;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left" style="margin-left: 5px;"></a>
<a class="mui-action-menu mui-pull-right " style="margin-right: 10px;margin-top: 10px;"><img src="images/sweep2.png" width="23px" height="23px" onclick="sweep();" /></a>
<!--<a class="mui-icon-extra mui-icon-extra-sweep mui-pull-right" style="margin-right: 5px;"></a>-->
<h1 class="mui-title" id="title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab nav_bar">
<a id="defaultTab" class="mui-tab-item mui-active" href="w_index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item icon_daiban" href="w_todo.html">
<span class="mui-icon mui-icon-compose" id="ToDoCount"></span>
<span class="mui-tab-label">待办</span>
</a>
<a class="mui-tab-item " href="webctrl/zxzx.html">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">咨询</span>
</a>
<a class="mui-tab-item" href="mine.html">
<span class="mui-icon mui-icon-gear" id="ToDoVersionNum"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<input type="hidden" value="100" id="version" />
<script src="js/mui.min.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" charset="utf-8">
var menu = null,
main = null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
gestureConfig: {
doubletap: true
},
subpages: [{
id: 'w_index',
url: 'w_index.html',
styles: {
top: '44px',
bottom: '50px'
}
}]
});
var subpages = ['w_index.html', 'w_todo.html', 'webctrl/zxzx.html', 'mine.html'];
var subpage_style = {
top: '44px',
bottom: '50px'
};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
for(var i = 0; i < 4; i++) {
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if(i > 0) {
sub.hide();
}
main.append(sub);
}
//获取新版本
//getNewVersionCount();
//获取待办事项
//getToDoWorkCount();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function() {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'right_plus_menu',
url: 'webctrl/right_plus_menu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
},
show: {
aniShow: 'none'
}
});
}, 200);
});
function back() {
if(showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//当前激活选项
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;
}
// alert(this.querySelector('.mui-tab-label').innerHTML);
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//alert(title.innerHTML);
if(title.innerHTML == "首页") {
title.innerHTML = "振安教育云平台";
}
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
//var main = plus.webview.currentWebview();
if(isInTransition) {
return;
}
if(!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
});
menu.show('none', 0, function() {
main.setStyle({
mask: 'rgba(0,0,0,0,4)',
left: '70%',
transition: {
duration: 300
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 350);
showMenu = true;
});
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu() {
if(isInTransition) {
return;
}
if(showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 300
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
mui.later(function() {
isInTransition = false;
menu.hide();
}, 400);
}
}
function getNewVersionCount() {
var version = document.getElementById("version").value;
var url = url_head + version;
var spanTs = document.getElementById("ToDoVersionNum");
mui.get(url, {}, function(resultData, text, xhr) {
resultData = eval(resultData);
if(resultData[0].flag == 1) {
spanTs.innerHTML = "<span class=mui-badge>1</span>";
}
});
}
//自定义事件，模拟点击“首页选项卡”
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');
}
});
function getToDoWorkCount() {
var userInfo = getCurrentUser();
var userid = userInfo.UserID;
setRequestIdentify();
mui.ajax(urlOri, {
data: {
userid: userid
},
dataType: 'html',
type: 'post',
timeout: 10000,
success: function(json) {
var dataObj = eval("(" + json + ")"); //转换为json对象
var mycount = dataObj.wcount;
document.getElementById("ToDoCount").innerHTML = "<span class='mui-badge mui-badge-red' >" + mycount + "</span>";
},
error: function(xhr, type, errorThrown) {
mui.toast('检查网络设置');
}
});
}
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
});
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
};
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
//首次按键，提示‘再按一次退出应用’
if(!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
};
/**************二维码扫描*****jason******************************************************************/
var ws = null,
wo = null;
var scan = null,
domready = false;
// H5 plus事件处理
//弹出菜单
function sweep() {
var bts = [{
value: "camera",
title: "调用摄像头"
}, {
value: "gally",
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
title: "扫描二维码",
cancel: "取消",
buttons: bts
},
function(e) {
// document.getElementById("busLine").innerText = bts[e.index - 1].value;
var btnclick = bts[e.index - 1].value;
if(btnclick == "camera") {
takePic();
}
if(btnclick == "gally") {
scanImg();
}
}
);
}
//调用摄像头
function takePic() {
clicked('webctrl/Barcode.html', true, true);
}
//从相册选择
function scanImg() {
plus.gallery.pick(function(path) {
//mui.alert(path);
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert("无法识别此图片");
});
}, function(err) {
plus.nativeUI.alert("Failed: " + err.message);
});
}
function onmarked(type, result, file) {
switch(type) {
case plus.barcode.QR:
type = "QR";
break;
case plus.barcode.EAN13:
type = "EAN13";
break;
case plus.barcode.EAN8:
type = "EAN8";
break;
default:
type = "其它";
break;
}
result = result.replace(/\n/g, '');
mui.alert(type + ',' + result + ',');
//wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');");
//back();
}
/**************二维码扫描*******************************************************************************/
</script>
</body>
</html>
//侧滑页面
<html>
<head>
<meta charset="utf-8">
<title>右滑导航菜单</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style type="text/css">
body,
.mui-content {
background-color: #333;
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
.mui-table-view {
margin-bottom: 35px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="title">集团</div>
<div class="content">
振安教育集团App分为家长App，教职工App两类。</br>
1.家长通过本软件可以实现为自己的子女报名注册、缴费、请销假、查询成绩、预习功课、在线微课学习、家校沟通、接送服务等十多项操作。</br>
2.学校职工通过本软件可以实现物资申购、信息提醒、学生考勤采集、请销假、学生接送、资产盘点、师生交流、班级管理等操作。
<p style="margin: 10px 15px;">
<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭菜单</button>
</p>
</div>
<div class="title" style="margin-bottom: 25px;"></div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="../w_index.html" >
家长App入口
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="../w_index_zg.html" >
教职工App入口
</a>
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/update.js"></script>
<script type="text/javascript" charset="utf-8">
var aniShow = "slide-in-right";
//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
if(!mui.os.android) {
// var span = document.getElementById("android-only")
// if(span) {
// span.style.display = "none";
// }
aniShow = "pop-in";
}
var subWebview = null,
template = null,
index = null;
mui.plusReady(function() {
//获得主页面webview引用；
index = plus.webview.currentWebview().opener();
});
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
var href = this.href;
if(type == "common" || mui.os.ios) {
var webview_style = {
popGesture: "close"
};
mui.openWindow({
id: id,
url: href,
styles: webview_style,
show: {
aniShow: aniShow
},
waiting: {
autoShow: false
}
});
//close();
} else {
// var wvs=plus.webview.all();
// for(var i=0;i<wvs.length;i++){
// alert("id:"+ i+"_"+wvs[i].id);
// }
//mui.toast('12');
var href = this.href;
var title = this.innerText;
//template = plus.webview.getWebviewById("H56145454");
template = plus.webview.getWebviewById("HBuilder");
//alert(template.id);
//获得共用子webview
subWebview = template.children()[0];
//alert(subWebview);
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(template, 'updateHeader', {
title: title,
showMenu: false
});
if(subWebview.getURL() != href) {
subWebview.loadURL(href);
} else {
subWebview.show();
}
template.show('slide-in-right', 300);
close();
}
});
/**
* 关闭侧滑菜单
*/
function close() {
//mui.toast('error');
mui.fire(mui.currentWebview.opener(), "menu:close");
}
//点击“关闭侧滑菜单”按钮处理逻辑
document.getElementById("close-btn").addEventListener("tap", close);
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragleft', function(e) {
if(!mui.isScrolling) {
e.detail.gesture.preventDefault();
}
});
//监听左滑事件，若菜单已展开，左滑要关闭菜单；
window.addEventListener("swipeleft", function(e) {
// if(Math.abs(e.detail.angle) >170 ) {
// close();
// }
close();
});
mui.menu = close;
</script>
</body>
</html>
1 个回复
Trust - 少说废话
建议先不要加载子webview，单独就主窗口和侧滑窗口进行测试。
尝试调整下menu所指向webview的zIndex值，可能是其它窗口遮住首页了。
可以用相关的API，检测下目标窗口对象是否存在，以及存在的数量。
参考下plus.webview相关API。
如果是Mac设备，可以尝试用safari浏览器调试下。