MUI的webview模式-缩放式侧滑（类手机QQ）

MUI提供了非常多的控件，我想其中的侧滑导航大多数MUI使用者都在使用，并且遇到不少难题。MUI模板里面有一个非常亮眼的侧滑导航当属缩放式导航（类手机QQ），这是一个DIV模式的缩放式侧滑，它的优点是可以跟着手势滑动，缺点是不可以复用，其实它还有其它缺点，比如在主页面拥有子webview的情况下，这种缩放式侧滑就无法使用了，由于是div模式的，子webview并不会跟着一起缩放。这就不得不让人舍弃主页面的子webview了，但是一般主页面都有下拉刷新控件的，而下拉刷新最佳的拖动性能是必须使用一个单独的webview去装载下拉刷新（使用原生body滚动，并且下拉拖动的是webview不是div），如下图，中间下拉刷新是一个webview，导航和底部菜单是一个webview，因此遇到这种情况我们就需要采用webview模式的缩放式侧滑。

这里我使用webview模式开发的缩放式侧滑，做的不好的地方请指教。主要思路是让一个左滑webview被挡在主webview之下；首先有一个侧滑页面的webview和主页面的webview，主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html，代码图片如下（未登录情况下的左边滑动webview，注意布局右边留一部分空白提供遮挡）：

// 预加载侧滑页面，先让页面藏在显示区域之外-100%
		  	var memberLeftView = mui.preload({
			    url:'views/member/left.html',
			    id:'views/member/left.html',
			    styles: {
					left: "-100%",
					zindex: -9997,
					render:'always'
				}
			});

左边图片如下：

然后在触发侧滑的时候设置页面webview的移动位置，侧滑页面首先右移到显示区域，主页面的webview移动到left: '70%',top: '10%',bottom: '10%',的位置，同时打开遮罩（webview的遮罩会同时把子页面也一起遮罩），动画300毫秒的移动时间，注意：切勿使用mui.createMash(callback);去创建遮罩，因为主页面是有子webview，会造成不同步且会出现闪动情况，另外render:'always'可以避免每次去渲染dom，增强webview的缩放体验。接着在关闭遮罩的时候，再移回原来的位置，这样就实现了简单的webview模式的缩放式侧滑。注意：恢复正常界面的时候隐藏侧滑页面，避免资源消耗。代码如下：

                        // 我的头像的点击事件
			document.getElementById('reho-left-me').addEventListener('tap', function() {
				// 侧滑页面出现右移到显示区域
				GO_Index.memberLeftView.show('none', 0, function() {
					GO_Index.memberLeftView.setStyle({
						left: '0',
					});
				});
				// 主界面右移
				GO_Index.indexView.show('none', 0, function() {
					GO_Index.indexView.setStyle({
						left: '70%',
						top: '10%',
						bottom: '10%',
						mask: 'rgba(0,0,0,0.5)',
						transition: {
							duration: 300
						}
					});
				});
				
				// 每次移除遮罩点击事件，避免重复添加监听
				GO_Index.indexView.removeEventListener('maskClick');
				// 点击关闭遮罩时
				GO_Index.indexView.addEventListener('maskClick', function(){
					// 主界面移动到最大显示区域
					GO_Index.indexView.setStyle({
						left: '0',
						top: '0',
						bottom: '0',
						mask: 'none',
						transition: {
							duration: 300
						}
					});
					// 侧滑界面移出显示区域之外
					GO_Index.memberLeftView.setStyle({
						left: "-100%",
						transition: {
							duration: 300
						}
					});
					// 隐藏侧滑页面，setTimeout避免竞争资源
					setTimeout(function() {
						GO_Index.memberLeftView.hide();
					}, 300);
					
				},false);
				
			});

实现效果如下图：

感谢你的阅读，webview模式的缩放是为了弥补存在子webview的情况下实现缩放式侧滑的难题。存在不足的地方请指教，谢谢！ （ 更多精彩内容请访问DCloud官网（http://www.dcloud.io/） ）