Webview侧滑菜单

之前看了下mui的侧滑菜单，发现只有div模式的。然后在社区里找到了webview模式的侧滑菜单，但是不太完美，只可以点击无法拖动。
所以找时间自己完善了一下。稍微测试了一下没有问题，拿过来给大伙分享一波，毕竟经常过来摘果子是时候自己也种一波了！ ps：欢迎大家提出宝贵意见，有问题请指出。

                       //初始化侧滑菜单页  
            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");  
            }  
                        //右滑开启侧滑菜单事件  
            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;  
                    }  
                });  
            }  
                        //左滑隐藏侧滑菜单  
            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侧滑菜单的核心部分。其它代码我就不多上传，有需要了解请下载附件。

ps:本文章为作者原创，转载时请著名出处！