MUI 弹出菜单被子页面挡住的解决方法

最新推荐文章于 2021-08-29 10:01:20 发布

贫僧法号梦遗

最新推荐文章于 2021-08-29 10:01:20 发布

阅读量2.9k

点赞数 5

分类专栏： MUI 文章标签： MUI 弹出菜单子页面被挡住主页面

本文链接：https://blog.csdn.net/csdn__cx/article/details/83387277

版权

MUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

MUI 弹出菜单被子页面挡住的解决方法

MUI 在使用弹出菜单时，若使用了子页面，而在主页面弹出菜单，则弹出菜单会被子页面挡住，如图：

在这里插入图片描述
解决方法有三种：
1.父页面按钮被点击之后，父页面通知子页面，在子页面弹出菜单（弹出菜单代码在子页面而非主页面），待用户选择菜单项后，子页面又通知父页面被点击的菜单项，然后父页面做出相应。此方法需改变所以子页面，比较麻烦
2.新建一个新的页面，专门用于弹出菜单，用一张灰色的透明图片模拟遮罩蒙版。
3.使用原生方法弹出，可绝对置顶。此方法因为使用了原生方法，所以不易修改菜单的样式。

此篇文字详细讲解第二种方法：
步骤一：新建一个html文件，名为meau.html
步骤二：在meau.html文件中写入如下代码

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<link rel="stylesheet" href="../css/mui.css" type="text/css" charset="utf-8" />
	<style type="text/css">
		html {
			width: 100%;
			height: 100%;
		}
		
		body {
			height: 100%;
			background-color: transparent;
		}
		
		.mui-popover .mui-popover-arrow {
			left: auto;
			right: 10px!important;
		}
		
		.mui-popover {
			display: block;
			width: auto;
			opacity: 1;
			text-align: center;
		}
		
		.mui-table-view-cell> a:not(.mui-btn) {
			color: #000;
		}
	</style>
</head>

<body>
	<a style="display: block;height: 100%; background:url(../img/mask.png);"></a>
	<div id="topPopover" class="mui-popover" style="position:fixed ;top: 60px;right:5px;">
		<div class="mui-popover-arrow" style="top: -30px;"></div>
		<ul class="mui-table-view" style="color: #fff; top: -4px;right: 0;">
			<li class="mui-table-view-cell  ">
				<a id="addfriend" href="javascript:;">
					<!--<button id="addfriend" class="mui-btn mui-btn-blue mui-btn-link">-->
						
					 添加好友
					<!--</button>-->
				</a>
			</li>
			<li class="mui-table-view-cell ">
				<a id="previous" href="javascript:;"> 创建群聊 </a>
			</li>
			<li class="mui-table-view-cell ">
				<a id="refresh" href="javascript:;"> 刷新</a>
			</li>
			<li class="mui-table-view-cell ">
				<a id="homePage" href="javascript:;"> 首页 </a>
			</li>
		</ul>
	</div>
</body>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	mui.init({
	  preloadPages:[{
	    id:'tab-webview-main.html',
	    url:'tab-webview-main.html'           
	  }
	  ]
	});
	mui.plusReady(function() {
		ws = plus.webview.currentWebview();
		ws.setStyle({
			mask: "none"
		});
		window.addEventListener("tap", function() {
			ws.hide();
		});
		window.addEventListener("dragstart", function() {
			ws.hide();
		});
		document.getElementById('addfriend').addEventListener('tap', function(e) {
			e.detail.gesture.preventDefault();
			var selfPage = plus.webview.currentWebview();
			
			var openerPage = selfPage.opener();
			
			mui.fire(openerPage,'addfriend1',{aaa:"aaa",bbb:"bbb"});
			
			selfPage.close();
			
			openerPage.show();
		}, false);
		
		
		
	});
	
	
</script>

步骤三：（1）在主页面中添加触发弹出菜单的按钮代码为： `button id="menu" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">` （2）对meau.html进行预加载

		var floatw = null;
		// 创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			
			floatw = plus.webview.create("menu.html", "menu.html", {
                background: 'transparent',
                zindex: 10,
           });
		});

（3）为按钮添加监听事件

document.getElementById('menu').addEventListener('tap',  function() {
	        if(floatw) { // 避免快速多次点击创建多个窗口
	            //floatw.show("fade-in",300);
	            plus.webview.show("menu.html","fade-in",300);
	        } else {
	            floatw = plus.webview.create("menu.html", "menu", {
	                background: 'transparent',
	                zindex: 10,
	            });
	            floatw.show("fade-in",300);
	        }
	    });

执行完以三个步骤后即可弹出菜单了，但是没有遮罩蒙版的效果

步骤四：添加透明图片，达到遮罩蒙版的效果，没找到CSDN如何上传图片文件，有需要此透明图片可练习小编，QQ247210380

在这里插入图片描述

最终效果：
在这里插入图片描述

贫僧法号梦遗

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
8
评论
MUI 弹出菜单被子页面挡住的解决方法

MUI 弹出菜单被子页面挡住的解决方法MUI 在使用弹出菜单时，若使用了子页面，而在主页面弹出菜单，则弹出菜单会被子页面挡住，如图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20181025215128351.?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aH...
复制链接

扫一扫