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

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

这里我讲解一下我使用webview模式开发的缩放式侧滑，做的不好的地方请指教。首先有一个侧滑页面的webview和主页面的webview，主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html，代码如下：

// 预加载侧滑页面，先让页面藏在显示区域之外-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%',的位置，同时打开遮罩，动画300毫秒的移动时间，注意：切勿使用mui.createMash(callback);去创建遮罩，因为主页面是有子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);    

});

实现效果如下图：