使用了webview侧滑页面+父子页面，然后点击打开侧滑菜单需要点击多次，相关代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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">
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button id="IndexSet" type="button" class=" mui-btn mui-btn-link mui-pull-left">
<span class="mui-icon mui-icon-bars"></span>
</button>
<h1 id="title" class="mui-title">标题</h1>
</header>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($, doc) {
var main,menu, mask = $.createMask(_closeMenu);
var showMenu = false,mode = 'menu-move';
//mui初始化
$.init({
swipeBack: false,
subpages:[{
url:'checkMast.html',
id:'checkMast.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
function _back() {
if (showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
console.log('关闭菜单');
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.hide();
showMenu=false;
return true;
}
}
/**
* 关闭侧滑菜单（业务部分）
*/
function _closeMenu() {
if (showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
//改变标志位
showMenu = false;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
_closeMenu();
//关闭遮罩
mask.close();
}
$.plusReady(function() {
//退出应用
var backButtonPress = 0;
$.back = function(event) {
if(!_back()) return;
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
//左上角设置监听
//点击左上角图标，打开侧滑菜单；
document.querySelector('#IndexSet').addEventListener('tap', openMenu);
//处理侧滑菜单
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'systemSetting.html',
url: 'systemSetting.html',
styles: {
left: 0,
width: '70%',
zindex: 9997
}
});
},300);
/**
* 显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show('none', 0, function() {
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
break;
case 'menu-move':
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
case 'all-move':
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
}
});
//显示遮罩
mask.show();
showMenu = true;
}
}
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft", closeMenu);
//处理侧滑菜单END
}(mui, document));
</script>
</body> </html>
3 个回复
LLgg
把代码贴一下，我们好查看问题，才能给你提供我们的解决方案─━ _ ─━✧
这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
LLgg
根据的你的代码调整之后的代码，
这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
6***@qq.com (作者)
找到原因了，使用一台Android 4.4机器，配置较低会出现这种问题，用华为，三星就不会。不清楚了，可能兼容有问题。