我按照Hbuilder里面的mui演示项目的首页,做了一个抽屉(drawer)效果,顶部导航里面,一左一右两按钮,点击左边按钮,动画(从左到右)滑出一个预先加载好的页面(按照演示首页的做法),点击右边按钮也一样滑出(从右到左)一个预先加载好的页面,我的实现方式就是完全按照演示首页的做法来(为了可读性考虑,随便改到几个变量名字),然后问题出现了:
- ios平台上真机调试,左右两个webview都可以顺利滑出,很流畅,没问题!
-
android 平台上(已经试过 nexus 5 , samsung s6等三个机型),如果先点击右边的图标打开预加载好的webview, 顺利滑出;但是不管之后还是之前,如果打开过左边的webview(drawer 效果)之后,再点击右边图标想打开右边的webview,就完全打不开,主窗口也没有移动,只出现了一个半透明的mask,但是 左边的窗口和drawer效果,毫无影响,从头到尾都可以顺利弹出。请帮我看看是什么问题?代码见下:
var leftDrawer=null,rightDrawer=null,rootWindow=null; var leftDrawerStatus=false, rightDrawerStatus=false; var isLeftInTransition=false,isRightInTransition=false; mui.plusReady(function(){ plus.screen.lockOrientation('portrait-primary'); rootWindow=plus.webview.currentWebview(); rootWindow.addEventListener('maskClick',function(){ if(leftDrawerStatus){ closeLeftDrawer(); } else{ closeRightDrawer(); } }); setTimeout(function(){ leftDrawer=mui.preload({ id:'leftDrawer', url:'leftDrawer.html', styles:{ left:0, top:0, width:'70%', zindex:-1 }, show:{ aniShow:'none' } }); rightDrawer=mui.preload({ id:'rightDrawer', url:'rightDrawer.html', styles:{ right:0, top:0, width:'70%', zindex:-1 }, show:{ aniShow:'none' } }); },200); function openLeftDrawer(){ if(isLeftInTransition){ return ; } if(!leftDrawerStatus){ isLeftIntransition=true; leftDrawer.setStyle({ mask: 'rgba(0,0,0,0)' }); leftDrawer.show('none', 0, function() { rootWindow.setStyle({ mask: 'rgba(0,0,0,0.4)', left: '70%', transition: { duration: 150 } }); mui.later(function() { isLeftInTransition = false; leftDrawer.setStyle({ mask: "none" }); }, 160); leftDrawerStatus = true; }); } }; function openRightDrawer(){ if(isRightInTransition){ return ; } if(!rightDrawerStatus){ isRightInTransition=true; rightDrawer.setStyle({ mask: 'rgba(0,0,0,0)' }); rightDrawer.show('none', 0, function() { rootWindow.setStyle({ mask: 'rgba(0,0,0,0.4)', right: '70%', transition: { duration: 150 } }); mui.later(function() { isRightInTransition = false; rightDrawer.setStyle({ mask: "none" }); }, 160); rightDrawerStatus = true; }); } }; function closeLeftDrawer() { if (isLeftInTransition) { return; } if (leftDrawerStatus) { isLeftInTransition = true; rootWindow.setStyle({ mask: 'none', left: 0, transition: { duration: 200 } }); leftDrawerStatus = false; mui.later(function() { isLeftInTransition = false; leftDrawer.hide(); }, 300); } }; function closeRightDrawer() { if (isRightInTransition) { return; } if (rightDrawerStatus) { isRightInTransition = true; rootWindow.setStyle({ mask: 'none', right: 0, transition: { duration: 200 } }); rightDrawerStatus = false; mui.later(function() { isRightInTransition = false; rightDrawer.hide(); }, 300); } }; document.querySelector('#leftDrawer').addEventListener('tap',function(e){ if(leftDrawerStatus){ closeLeftDrawer(); } else{ openLeftDrawer(); } }); document.querySelector('#rightDrawer').addEventListener('tap',function(e){ if(rightDrawerStatus){ closeRightDrawer(); } else{ openRightDrawer(); } }); });感谢!
shwanYu (作者)
就这些了,刚开始学习。加载的 leftdrawer.html和rightdrawer.html是我从Hbuilder样例中随便找的,没有其他内容和代码了!
2015-12-10 21:38