问题在代码位置为
//此处事件监听无效######################################
注释下两个监听事件失效！请教各位大神，不胜感激......................................................
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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.css">
<link rel="stylesheet" type="text/css" href="../../css/common/default.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav cus-header-bg">
<a class="mui-icon cus-icon-menu mui-pull-left"></a>
<a id="info" class="mui-icon cus-icon-setting mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">愛享富</h1>
</header>
<nav class="mui-bar mui-bar-tab" style="height: 60px;">
<a class="mui-tab-item mui-active" href="#tabbar-with-home" data-key="home">
<span class="mui-icon cus-icon-home cus-icon-tab"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-msg" data-key="msg">
<span class="mui-icon cus-icon-msg cus-icon-tab"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-service" data-key="service">
<span class="mui-icon cus-icon-service cus-icon-tab"></span>
<span class="mui-tab-label">服務</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-personal" data-key="person">
<span class="mui-icon cus-icon-mine cus-icon-tab"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script src="../../js/mui.min.js"></script>
<script src="../../js/update.js" type="text/javascript" charset="utf-8"></script>
<script>
var menu = null,
main = null,
home=null,
msg=null,
service=null,
person=null,
sub = null;
var showMenu = false;
var curIndex;
var subWebView;
var loadComment = function() {
}
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
gestureConfig: {
doubletap: true
}
});
mui.plusReady(function() {
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function() {
menu = mui.preload({
id: 'leftMenu',
url: 'leftMenu.html',
styles: {
left: 0,
width: '80%',
zindex: 100000
},
show: {
aniShow: 'none'
}
});
home = mui.preload({
id: 'home',
url: 'home-sub.html',
show: {
aniShow: 'slide-out-left'
},
styles: {
top: '43px',
bottom: '60px',
bounce: 'all',
scrollIndicator:'none'
}
});
msg = mui.preload({
id: 'msg',
url: 'msg-sub.html',
show: {
aniShow: 'slide-out-left'
},
styles: {
top: '43px',
bottom: '60px',
bounce: 'all',
scrollIndicator:'none'
}
});
service = mui.preload({
id: 'service',
url: 'service-sub.html',
show: {
aniShow: 'slide-out-left'
},
styles: {
top: '43px',
bottom: '60px',
bounce: 'all',
scrollIndicator:'none'
}
});
person = mui.preload({
id: 'pserson',
url: 'personalCenter-sub.html',
show: {
aniShow: 'slide-out-left'
},
styles: {
top: '43px',
bottom: '60px',
bounce: 'all',
scrollIndicator:'none'
}
});
subWebView= {
"home": home,
"msg": msg,
"service": service,
"person": person
};
curIndex='home';
main.append(subWebView[curIndex]);
}, 200);
loadComment();
});
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
alert("open");
if(isInTransition) {
return;
}
if(!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
isInTransition = true;
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0.1)',
left: '80%',
transition: {
duration: 150
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true;
});
}
};
/**
* 关闭菜单
*/
function closeMenu() {
alert("colse");
if(isInTransition) {
return;
}
if(showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
mui.later(function() {
isInTransition = false;
menu.hide();
}, 300);
}
};
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.cus-icon-menu').addEventListener('tap', function(e) {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
});
mui("nav").on("tap", "a", function() {
var index = this.dataset.key;
if(index==curIndex){
return;
}else{
main.append(subWebView[index]);
main.remove(subWebView[curIndex]);
curIndex=index;
}
//sub.loadURL(urls[index]);
});
//敲击顶部导航，内容区回到顶部
document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)');
});
//此处事件监听无效######################################
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
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();
}
}
//处理右上角关于图标的点击事件；
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({
id: 'set',
url: '../../page/setting/setting.html',
waiting: {
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...' //等待对话框上显示的提示内容
}
});
});
//首页返回键处理
//1、若侧滑菜单显示，则关闭侧滑菜单
//2、否则，执行mui框架默认的关闭首页功能
var _back = mui.back;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
_back();
}
};
</script>
</body> </html>
1 个回复
4***@qq.com (作者) - 无
重新整理了下代码
<!DOCTYPE html>
<html>
</html>