5+APP之侧滑菜单

最新推荐文章于 2021-03-16 10:08:52 发布

占星安啦

最新推荐文章于 2021-03-16 10:08:52 发布

阅读量601

点赞数

分类专栏：前端文章标签： 5+APP 侧滑菜单

本文链接：https://blog.csdn.net/u012796085/article/details/89417348

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

主界面 index.html

<body>
	<h4>这是主界面</h4>
	<input type="button" value="打开侧滑菜单" id="btnOpen" />
	<script type="text/javascript" src="js/mui.js"></script>
	<script type="text/javascript">
		var menu = null;
		var current = null;
		mui.plusReady(function() {
			//当前webview对象
			current = plus.webview.currentWebview();
			//创建菜单webview对象
			menu = plus.webview.create("menu.html", "menu.html", {
				width: "40%"
			});
			//点击打开菜单
			document.getElementById('btnOpen').addEventListener('click', function() {
				showMenu();
			});
			//右划打开菜单
			window.addEventListener('dragright', function(e) {
				e.detail.gesture.preventDefault();
			});
			window.addEventListener("swiperight", showMenu);
			//遮罩点击事件，关闭侧滑
			current.addEventListener("maskClick", function(e) {
				closeMenu();
			});
			//显示菜单
			function showMenu() {
				menu.setStyle({
					left: "0",
					transition: {
						duration: 1000
					}
				});
				current.setStyle({
					mask: "rgba(0,0,0,0.5)",
					left: "40%",
					transition: {
						duration: 1000
					}
				});
				menu.show("slide-in-left", 900);
			}
			//关闭菜单
			function closeMenu() {
				current.setStyle({
					left: "0",
					mask: "none",
					transition: {
						duration: 1000
					}
				});
				menu.setStyle({
					left: "-40%",
					transition: {
						duration: 1000
					}
				});
			}
		});
	</script>
</body>

公共侧滑页面 menu.html

<style>
	body{
		background-color: #464e5b;
	}
</style>
<h4>侧滑菜单</h4>
<input type="button" value="关闭" id="btnClose" />
<script type="text/ecmascript" src="js/mui.js"></script>
<script type="text/javascript">
	mui.plusReady(function() {
		var index = plus.webview.currentWebview().opener();
		var current = plus.webview.currentWebview();
		function closeMenu() {
			//关闭index的遮罩，并恢复原位
			index.setStyle({
				left: "0",
				mask: "none",
				transition: {
					duration: 1000
				}
			});
			//向左移动当前webivew
			current.setStyle({
				left: "-40%",
				transition: {
					duration: 1000
				}
			});
		}
		//点击关闭侧滑菜单
		document.getElementById('btnClose').addEventListener('click', closeMenu);
		//左划关闭侧滑菜单
		window.addEventListener("swipeleft", closeMenu);
	});
</script>