单个webview 用侧滑导航菜单切换都正常 当打开3个webview以上时 侧滑菜单关闭会明显卡顿
注:侧滑菜单用的是webview模式 所有页面共用
- 发布:2015-02-05 17:13
- 更新:2015-02-05 17:49
- 阅读:1424
侧滑菜单卡顿
晓风7 (作者)
附上侧滑代码:
menu = mui.openWindow({
id: 'publicUpperRight',
url: 'publicUpperRight.html',
styles: {
left: "30%",
width: "252px",
height: "378px",
top:"44px",
zindex: 997
},
show: {
autoShow:false,//页面loaded事件发生后自动显示,默认为true
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
/*
-
显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//解决android 4.4以下版本webview移动时,导致fixed定位元素错乱的bug;
if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "static";
//同时需要修改以下.mui-contnt的padding-top,否则会多出空白;
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
}//侧滑菜单处于隐藏状态,则立即显示出来;
// menu.show('none', 0, function() {
switch (mode){
case 'main-move':
menu.show('none',0,function () {}); //主窗体开始侧滑; main.setStyle({ left: '-70%', transition: { duration: 150 } });
// console.log('main:'+menu.getStyle().left+','+menu.getStyle().zindex);
break;
case 'menu-move':
// console.log('menu-1:'+menu.getStyle().left+','+menu.getStyle().zindex);
menu.show('none',0,function () {
menu.setStyle({
left: '30%',
transition: {
duration: 150
}
});
});
console.log('menu-2:'+menu.getStyle().left+','+menu.getStyle().zindex);
break;
case 'all-move':
main.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
menu.setStyle({
left: '30%',
transition: {
duration: 150
}
});
break;
}
// });
//显示主窗体遮罩mask.show(); //内容窗口遮罩 /*var contentWebview=plus.webview.getWebviewById(uid+"-body"); mui.fire(contentWebview, 'hideContent', { isShow: true }); */ showMenu = true; } } /** * 关闭侧滑菜单 */ function closeMenu() { if (showMenu) { //解决android 4.4以下版本webview移动时,导致fixed定位元素错乱的bug; if (mui.os.android && parseFloat(mui.os.version) < 4.4) { document.querySelector("header.mui-bar").style.position = "fixed"; //同时需要修改以下.mui-contnt的padding-top,否则会多出空白; document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px"; } switch (mode){ case 'main-move': //主窗体开始侧滑; main.setStyle({ left: '0', transition: { duration: 150 } }); break; case 'menu-move': //主窗体开始侧滑; menu.setStyle({ left: '100%', transition: { duration: 150 } }); break; case 'all-move': //主窗体开始侧滑; main.setStyle({ left: '0', transition: { duration: 150 } }); //menu页面同时移动 menu.setStyle({ left: '100%', transition: { duration: 150 } }); break; } showMenu = false; //等窗体动画结束后,隐藏菜单webview,节省资源; setTimeout(function() { menu.hide(); }, 300); //内容窗口遮罩 /*var contentWebview=plus.webview.getWebviewById(uid+"-body"); mui.fire(contentWebview, 'hideContent', { isShow: false }); */ } }
//点击侧滑图标,打开侧滑菜单;
document.querySelector('.mui-action-menu').addEventListener('tap', 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("swipeleft", openMenu);
//主界面向右滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;
window.addEventListener("swiperight", closeMenu);
//menu页面向右滑动,关闭菜单;
window.addEventListener("menu:swiperight", closeMenu);