wodertian
wodertian
  • 发布:2016-04-07 14:16
  • 更新:2016-04-07 19:59
  • 阅读:1627

子webview会把父元素webview的侧滑菜单盖住,怎么解决

分类:MUI

刚刚没发现图挂了。。。这里不能传本地图,我就直接发链接吧

这是手机上的截图http://imgsrc.baidu.com/forum/pic/item/5e00972a2834349b46531023ceea15ce37d3bee8.jpg
我想要的效果是这样的http://imgsrc.baidu.com/forum/pic/item/cfa2cf5494eef01fbf6e6163e7fe9925bd317dcf.jpg

下面是两个页面的代码

父页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="UTF-8">  
      	mui.init({  
      		subpages:[{  
      			url:"index.html",  
      			styles:{  
      				top:"44px",  
      				bottom:"44px"  
      			}  
      		}]  
      	});  
    </script>  
</head>  
<body>  
	<div class="mui-off-canvas-wrap mui-draggable">  
		<div class="mui-inner-wrap">  
			<aside class="mui-off-canvas-left">  
				<div class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<ul class="mui-table-view">  
							<li class="mui-table-view-cell mui-active">link1</li>  
							<li class="mui-table-view-cell">link2</li>  
						</ul>  
					</div>  
				</div>  
			</aside>  
			<header class="mui-bar mui-bar-nav">  
				<span class="mui-icon mui-icon-bars mui-active" id="menu-switch"></span>  
				<h1 class="mui-title">Title</h1>  
			</header>  
			<nav class="mui-bar mui-bar-tab">  
				<a class="mui-tab-item">  
					<span class="mui-icon mui-icon-home"></span>  
					<span class="mui-tab-label">Home</span>  
				</a>  
				<a class="mui-tab-item">  
					<span class="mui-icon mui-icon-contact"></span>  
					<span class="mui-tab-label">Info</span>  
				</a>  
			</nav>  
		</div>  
	</div>  
	<script>  
		var menuSwitch = document.getElementById("menu-switch");  
		  
		//监听左滑菜单按钮  
		menuSwitch.addEventListener("tap",function(){  
			mui(".mui-off-canvas-left").offCanvas("show");  
		});  
	</script>  
</body>  
</html>

子页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link rel="icon" href="images/1.ico" />  
    <script type="text/javascript" charset="utf-8">  
      	mui.init();  
    </script>  
</head>  
<body>  
	  
  
	<div class="mui-content mui-scroll-wrapper">  
	   	<div class="mui-scroll">  
	   		<div class="mui-slider">  
	   			<div class="mui-slider-group mui-slider-loop" id="gallery-group"></div>  
	   			<div class="mui-slider-indicator" id="gallery-indicator"></div>  
	   		</div>  
	   	</div>  
	</div>  
	  
	  
	  
	<script>  
		var falseData = {};  
		falseData.imgSrc = ["images/1.jpg","images/2.jpg","images/3.jpg"];  
		  
		gallery(falseData.imgSrc);  
		  
		function gallery(imgArr){  
			/*渲染轮播组件*/  
			var galleryGroup = document.getElementById("gallery-group"),  
				galleryIndicator = document.getElementById("gallery-indicator"),  
				groupContent = "",  
				indicatorContent = "",  
				aux= [];//占位图片  
			aux.push("<div class='mui-slider-item mui-slider-item-duplicate'><a><img src='"+imgArr[imgArr.length-1]+"'/></a></div>");  
			aux.push("<div class='mui-slider-item mui-slider-item-duplicate'><a><img src='"+imgArr[0]+"'/></a></div>");  
			groupContent = aux[0]+"<div class='mui-slider-item'><a><img src='"+imgArr.join("'/></a></div><div class='mui-slider-item'><a><img src='")+"'/></a></div>"+aux[1];  
			for(var i=0,j=imgArr.length;i<j;i++){  
				if(i===0){  
					indicatorContent +="<div class='mui-indicator mui-active'></div>";  
					continue;  
				}  
				indicatorContent +="<div class='mui-indicator'></div>";  
			}  
			galleryGroup.innerHTML = groupContent;  
			galleryIndicator.innerHTML = indicatorContent;  
			mui(".mui-slider").slider({  
				interval:1000  
			});  
		}  
		  
		mui.plusReady(function(){  
			plus.key.addEventListener("backbutton",function(){  
				plus.runtime.quit();  
			})  
		})  
	</script>  
</body>  
</html>
2016-04-07 14:16 负责人:无 分享
已邀请:
马脸老男人

马脸老男人 - Bazinga!

主页面:

<!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.min.css">  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>  
			<h1 class="mui-title">Hello mui</h1>  
		</header>  
		<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;  
			var showMenu = false;  
			mui.init({  
				swipeBack: false,  
				statusBarBackground: '#f7f7f7',  
				gestureConfig: {  
					doubletap: true  
				},  
				subpages: [{  
					id: 'list',  
					url: 'list.html',  
					styles: {  
						top: '45px',  
						bottom: 0,  
						bounce: 'vertical'  
					}  
				}]  
			});  
			mui.plusReady(function() {  
				//仅支持竖屏显示  
				plus.screen.lockOrientation("portrait-primary");  
				main = plus.webview.currentWebview();  
				main.addEventListener('maskClick', closeMenu);  
				//处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面;  
				setTimeout(function() {  
					menu = mui.preload({  
						id: 'menu.html',  
						url: 'menu.html',  
						styles: {  
							left: 0,  
							width: '70%',  
							zindex: -1  
						},  
						show: {  
							aniShow: 'none'  
						}  
					});  
				}, 200);  
			});  
			var isInTransition = false;  
			/**  
			 * 显示侧滑菜单  
			 */  
			function openMenu() {  
				if (isInTransition) {  
					return;  
				}  
				if (!showMenu) {  
					//侧滑菜单处于隐藏状态,则立即显示出来;  
					isInTransition = true;  
					menu.setStyle({  
						mask: 'rgba(0,0,0,0)'  
					}); //menu设置透明遮罩防止点击  
					menu.show('none', 0, function() {  
						//主窗体开始侧滑并显示遮罩  
						main.setStyle({  
							mask: 'rgba(0,0,0,0.4)',  
							left: '70%',  
							transition: {  
								duration: 150  
							}  
						});  
						mui.later(function() {  
							isInTransition = false;  
							menu.setStyle({  
								mask: "none"  
							}); //移除menu的mask  
						}, 160);  
						showMenu = true;  
					});  
				}  
			};  
			/**  
			 * 关闭菜单  
			 */  
			function closeMenu() {  
				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('.mui-icon-bars').addEventListener('tap', function(e) {  
				if (showMenu) {  
					closeMenu();  
				} else {  
					openMenu();  
				}  
			});  
			//主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作  
			window.addEventListener("swiperight", openMenu);  
			//主界面向左滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;  
			window.addEventListener("swipeleft", closeMenu);  
			//侧滑菜单触发关闭菜单命令  
			window.addEventListener("menu:close", closeMenu);  
			window.addEventListener("menu:open", openMenu);  
		</script>  
	</body>  
  
</html>
马脸老男人

马脸老男人 - Bazinga!

子页面:

<!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.min.css">  
		<style type="text/css">  
			#list {  
				/*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/  
				margin-top: -1px;  
			}  
		</style>  
	</head>  
  
	<body>  
		<div class="mui-content">  
			<ul id="list" class="mui-table-view mui-table-view-chevron">  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" href="examples/accordion.html">  
						accordion(折叠面板)  
					</a>  
				</li>  
				<li class="mui-table-view-cell mui-collapse">  
					<a class="mui-navigate-right" href="#">  
						actionsheet(操作表)  
					</a>  
					<ul class="mui-table-view mui-table-view-chevron">  
						<li class="mui-table-view-cell">  
							<a class="mui-navigate-right" href="examples/actionsheet.html">  
								H5模式actionsheet  
							</a>  
						</li>  
						<li class="mui-table-view-cell mui-plus-visible">  
							<a class="mui-navigate-right" href="examples/actionsheet-plus.html">  
								原生模式actionsheet  
							</a>  
						</li>  
					</ul>  
				</li>  
			</ul>  
			  
		</div>  
		<script src="js/mui.min.js"></script>  
		<script>  
			var index = null; //主页面  
			function openMenu() {  
				!index && (index = mui.currentWebview.parent());  
				mui.fire(index, "menu:open");  
			}  
			//在android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常  
			window.addEventListener('dragstart', function(e) {  
				mui.gestures.touch.lockDirection = true; //锁定方向  
				mui.gestures.touch.startDirection = e.detail.direction;  
			});  
			window.addEventListener('dragright', function(e) {  
				if (!mui.isScrolling) {  
					e.detail.gesture.preventDefault();  
				}  
			});  
			 //监听右滑事件,若侧滑菜单未显示,右滑要显示菜单;  
			window.addEventListener("swiperight", function(e) {  
				//默认滑动角度在-45度到45度之间,都会触发右滑菜单,为避免误操作,可自定义限制滑动角度;  
				if (Math.abs(e.detail.angle) < 4) {  
					openMenu();  
				}  
			});  
		</script>  
	</body>  
  
</html>  

马脸老男人

马脸老男人 - Bazinga!

侧滑页面:

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>Hello MUI</title>  
		<meta name="viewport" content="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">  
		<style type="text/css">  
			body,.mui-content{  
			  	background-color: #333;  
			  	color:#fff;  
			  }  
			  .title{  
			  	margin: 35px 15px 10px;  
			  }  
			  .title+.content{  
			  	margin: 10px 15px 35px;  
			  	color: #bbb;  
			  	text-indent: 1em;  
			  	font-size: 14px;  
			  	line-height: 24px;  
			  }  
			  .mui-table-view{  
			  	margin-bottom: 35px;  
			  }  
		</style>  
	</head>  
  
	<body>  
		<div class="mui-content">  
			<div class="title">侧滑导航</div>  
			<div class="content">  
				这是首页侧滑导航示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式:  
				1.点击本侧滑菜单页之外的任意位置;  
				2.点击如下红色按钮<span id="android-only">;3.Android手机按back键;4.Android手机按menu键  
				</span>。  
				<p style="margin: 10px 15px;">  
					<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>  
				</p>  
				  
			</div>  
			<div class="title" style="margin-bottom: 25px;">mui典型控件</div>  
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">  
						下拉刷新  
					</a>  
				</li>  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">  
						侧滑导航  
					</a>  
				</li>  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" href="examples/switches.html">  
						开关控件  
					</a>  
				</li>  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">  
						列表左滑菜单  
					</a>  
				</li>  
				<li class="mui-table-view-cell">  
					<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">  
						可拖动式选项卡  
					</a>  
				</li>  
			</ul>  
		</div>  
		<script src="js/mui.min.js"></script>  
		<script type="text/javascript" charset="utf-8">  
			var aniShow = "slide-in-right";  
			//关于backbutton和menubutton两个按键的说明,在iOS平台不存在,故需隐藏  
			if(!mui.os.android){  
				var span = document.getElementById("android-only")  
				if(span){  
					span.style.display = "none";  
				}  
				aniShow = "pop-in";  
			}  
			var subWebview=null,template=null,index=null;  
			mui.plusReady(function () {  
				//获得主页面webview引用;  
				index = plus.webview.currentWebview().opener();  
			})  
			mui('.mui-table-view').on('tap', 'a', function() {  
				var id = this.getAttribute("href");  
				var type = this.getAttribute("open-type");  
				var href = this.href;  
				if(type=="common"||mui.os.ios){  
					var webview_style = {  
						popGesture: "close"  
					};  
					mui.openWindow({  
						id: id,  
						url: href,  
						styles: webview_style,  
						show: {  
							aniShow: aniShow  
						},  
						waiting: {  
							autoShow: false  
						}  
					});  
				}else{  
					var href = this.href;  
					var title = this.innerText;  
					template = plus.webview.getWebviewById("default-main");  
					//获得共用子webview  
					subWebview = template.children()[0];  
					  
					//通知模板修改标题,并显示隐藏右上角图标;  
					mui.fire(template,'updateHeader',{title:title,showMenu:false});  
					if (subWebview.getURL() != href) {  
						subWebview.loadURL(href);  
					} else {  
						 subWebview.show();  
					}  
					template.show('slide-in-right', 150);  
				}  
			});  
			  
			/**  
			 * 关闭侧滑菜单  
			 */  
			function close() {  
				mui.fire(mui.currentWebview.opener(),"menu:close");  
			}  
			  
			//点击“关闭侧滑菜单”按钮处理逻辑  
			document.getElementById("close-btn").addEventListener("tap",close);  
			//在android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常  
			window.addEventListener('dragstart',function(e){  
				mui.gestures.touch.lockDirection = true; //锁定方向  
				mui.gestures.touch.startDirection = e.detail.direction;  
			});  
			window.addEventListener('dragleft', function(e) {  
				if(!mui.isScrolling){  
					e.detail.gesture.preventDefault();	  
				}  
			});  
			//监听左滑事件,若菜单已展开,左滑要关闭菜单;  
			window.addEventListener("swipeleft",function (e) {  
				if(Math.abs(e.detail.angle)>170){  
					close();						  
				}  
			});  
		</script>  
	</body>  
  
</html>
  • wodertian (作者)

    额,我刚刚用另外一种思路解决了,等下回家再看下你的方法,先谢谢了


    2016-04-07 18:06

  • 马脸老男人

    你可以把你的代码也贴出来吗?


    2016-04-07 18:09

马脸老男人

马脸老男人 - Bazinga!

刚在整理的时候又发现了一个问题:主页面要放在App首页,如果主页面不是App首页的话,记得在App首页的mui.init里加段代码,具体如下:

	mui.init({  
		main = plus.webview.currentWebview();  
	});
  • 马脸老男人

    加这段代码还是有问题,目前只能放在首页,实在抱歉!


    2016-04-08 10:57

该问题目前已经被锁定, 无法添加新回复