Webview侧滑菜单完善版

之前一直想写博客，然后一直不知道如何动笔，每次准备写个东西，一搜索发现有人已经写过了，还写的很好。这次公司开发产品使用mui框架去开发混合式app，在开发的过程中发现mui的【侧滑菜单】功能只有div模式的，社区找的版本有不太完美。所以自己完善了一下，开始自己的博客first blood！话不多说，代码核心如下：

1、初始化侧滑菜单

//初始化侧滑菜单页
			function initMenuPage() {
				//设置遮罩避免滑动时被点击
				menu = mui.preload({
					url: "side.html",
					id: "side",
					styles: {
						left: '100%',
						width: "80%",
						mask: 'rgba(0,0,0,0)'
					},
					show: {
						aniShow: "none"
					}
				});
				menu.show("none");
			}

2、开启右滑菜单，右滑开启左滑关闭（可以自己改变规则）

//右滑开启侧滑菜单事件
			function right_drag_event() {
				//右滑事件
				main.drag({
					callbackStep: 10,
					direction: 'right',
					moveMode: 'silent'
				}, {
					view: menu,
					moveMode: 'follow'
				}, function(e, s) {
					console.log('right drag event: ' + JSON.stringify(e));
					console.log(e.progress);
					main.setStyle({
						mask: "rgba(0,0,0,0.4)"
					});
					//					if(e.type === "start") {
					//						
					//					}
					if(e.type === "end" && e.progress === "0") {
						main.setStyle({
							mask: 'none'
						});
					}
					if(e.type === "end" && e.progress === "100") {
						menu.setStyle({
							mask: 'none'
						});
						left_drag_event();
						//显示关闭侧滑菜单
						showMenu = true;
					}
				});
			}

3、右滑完毕后，会开启左滑关闭功能（并在此时禁用右滑）

//左滑隐藏侧滑菜单
			function left_drag_event() {
				//打开侧滑菜单后，开启左滑关闭事件
				main.drag({
					direction: 'left',
					moveMode: 'followFinger'
				}, {
					view: menu,
					moveMode: 'follow'
				}, function(e) {
					console.log('left drag event: ' + JSON.stringify(e));
					if(e.type === "end") {
						main.setStyle({
							mask: "none"
						});
					}
					if(e.type === "end" && e.progress === "100") {
						//侧滑菜单关闭后，开启右滑打开事件
						close_wmenu(false);
						//显示关闭侧滑菜单
						showMenu = false;
						return;
					}
				});
				//左滑事件开启时，关闭右滑事件（目前不清楚，禁用左滑的方法）
				main.drag({
					direction: 'right',
					moveMode: 'silent'
				}, {
					view: 'newdrag',
					moveMode: 'follow'
				}, function(e) {
					console.log('left drag event: ' + JSON.stringify(e));
				});
			}

以上是webview侧滑核心。下载具体代码可以到： 点击打开链接