优化webview模式侧滑导航打开速度

Author: hbcui1984

examples/hello-mui/examples/offcanvas-drag-left-plus-main.html

@@ -100,18 +100,21 @@ <h1 class="mui-title">off canvas（侧滑导航）</h1>
 						return true;
 					}
 				}
-				//plusReady事件后，自动创建menu窗口；
+			//plusReady事件后，自动创建menu窗口；
 			mui.plusReady(function() {
 				main = plus.webview.currentWebview();
-				menu = mui.preload({
-					id: 'offcanvas-drag-left-plus-menu',
-					url: 'offcanvas-drag-left-plus-menu.html',
-					styles: {
-						left: "30%",
-						width: '70%',
-						zindex: 9997
-					}
-				});
+				//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
+				setTimeout(function () {
+					menu = mui.preload({
+						id: 'offcanvas-drag-left-plus-menu',
+						url: 'offcanvas-drag-left-plus-menu.html',
+						styles: {
+							left: "30%",
+							width: '70%',
+							zindex: 9997
+						}
+					});
+				},300);
 			});
 
 			/*

examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html

@@ -76,7 +76,13 @@
 		</div>
 	<script src="../js/mui.min.js"></script>
 	<script type="text/javascript" charset="utf-8">
-		mui.init();
+		//关闭back、menu按键监听，这样侧滑主界面会自动获得back和memu的按键事件，仅在主界面处理按键逻辑即可；
+		mui.init({
+			keyEventBind: {
+				backbutton: false,
+				menubutton: false
+			}
+		});
 		var main = null;
 		mui.plusReady(function () {
 			main = plus.webview.currentWebview().opener();
@@ -90,8 +96,6 @@
 		window.addEventListener("swiperight",closeMenu);
 
 		document.getElementById("close-btn").addEventListener('tap',closeMenu);
-		mui.menu = closeMenu;
-	  	mui.back = closeMenu;
 	</script>
 </body>
 

examples/hello-mui/examples/offcanvas-drag-left.html

@@ -162,9 +162,9 @@ <h1 class="mui-title">左滑导航</h1>
 			//Android暂不支持整体移动动画
 			if(!mui.os.android){
 				document.getElementById("move-togger").classList.remove('mui-hidden');
-				var spans = document.querySelectorAll('.android-only');
-				for (var i=0,len=spans.length;i<len;i++) {
-					spans[i].style.display = "none";
+				var spans = document.querySelectorAll('.android-only');
+				for (var i=0,len=spans.length;i<len;i++) {
+					spans[i].style.display = "none";
 				}
 			}
 
@@ -197,17 +197,15 @@ <h1 class="mui-title">左滑导航</h1>
 							break;
 					}
 					offCanvasWrapper.offCanvas().refresh();
-					offCanvasSide.classList.remove('mui-transitioning');
-					offCanvasSide.setAttribute('style', '');
 				}
 			});
 
 
-			document.getElementById('offCanvasShow').addEventListener('tap', function() {
-				offCanvasWrapper.offCanvas('show');
-			});
-			document.getElementById('offCanvasHide').addEventListener('tap', function() {
-				offCanvasWrapper.offCanvas('close');
+			document.getElementById('offCanvasShow').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('show');
+			});
+			document.getElementById('offCanvasHide').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('close');
 			});
 			//主界面和侧滑菜单界面均支持区域滚动；
 			mui('#offCanvasSideScroll').scroll();

examples/hello-mui/examples/offcanvas-drag-right-plus-main.html

@@ -98,19 +98,23 @@ <h1 class="mui-title">off canvas（侧滑导航）</h1>
 				return true;
 			}
 		}
-			//plusReady事件后，自动创建menu窗口；
+		//plusReady事件后，自动创建menu窗口；
 		mui.plusReady(function() {
 			main = plus.webview.currentWebview();
-			//侧滑菜单默认隐藏，这样可以节省内存；
-			menu = mui.preload({
-				id: 'offcanvas-drag-right-plus-menu',
-				url: 'offcanvas-drag-right-plus-menu.html',
-				styles: {
-					left: 0,
-					width: '70%',
-					zindex: 9997
-				}
-			});
+			//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
+			setTimeout(function () {
+				//侧滑菜单默认隐藏，这样可以节省内存；
+				menu = mui.preload({
+					id: 'offcanvas-drag-right-plus-menu',
+					url: 'offcanvas-drag-right-plus-menu.html',
+					styles: {
+						left: 0,
+						width: '70%',
+						zindex: 9997
+					}
+				});
+			},300);
+			
 		});
 		/**
 		 * 显示菜单菜单

examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html

@@ -87,7 +87,12 @@
 		</div>
 		<script src="../js/mui.min.js"></script>
 		<script type="text/javascript" charset="utf-8">
-			mui.init();
+			mui.init({
+				keyEventBind: {
+					backbutton: false,
+					menubutton: false
+				}
+			});
 			//获得侧滑主窗口webview对象
 			var main = null;
 			mui.plusReady(function () {