mui侧滑菜单栏

• 先创建侧菜单栏页面left.html,

var _self=null;
var menu =null;
 var mask=null;
var _self = null;
mui.plusReady(function() {
_self = plus.webview.currentWebview();//获取主页面Webview
 var menu_style = {
      left: "-70%",
    width: '70%',
    render:"always",
    };
 if(mui.os.ios) {
    menu_style.zindex = -1;
   } 
 menu = mui.openWindow({       
    id: 'left',
    url: 'left.html',
    styles: menu_style,
    show: {
        aniShow: 'none'
    },
    waiting: {
        autoShow: false
    }
  });
            
}

• 打开侧滑菜单

function openMenu() {
    plus.webview.startAnimation({    //窗口组合动画
        'view': _self,      //主页面向右移动页面宽度的百分之70；
        'styles': {
        'fromLeft': '0',
        'toLeft': "70%" 
    },
      'action': 'show'
    }, {
            'view': menu,
        'styles': {      //侧菜单页面向右移动页面宽度的百分之70；
            'fromLeft': "-70%", 
            'toLeft': '0%'
        },
       'action': 'show'
    },
    function(e) {           
        if(e.id == menu.id) { //侧滑菜单打开
            }
    }.bind(this))
    mask.show()  //打开遮罩蒙版
};

• 关闭侧菜单

function openMenu() {
    plus.webview.startAnimation({
        'view': _self,
        'styles': {
                    'fromLeft': '0',
                    'toLeft': "70%" 
             },
        'action': 'show'
    }, {
        'view': menu,
        'styles': {
                'fromLeft': "-70%",
                'toLeft': '0%'
            },
            'action': 'show'
    },function(e) {                     
        if(e.id == menu.id) { }
        }.bind(this))
};

• 点击遮罩蒙版关闭侧滑页面不建议使用mask =mui.createMask(close)；建议使用如下方法

 document.addEventListener('tap',function(){
    console.log(parseInt(menu.getStyle().left))
    var _left = parseInt(menu.getStyle().left)
    if(_left>=0){                               
         isthis.close()                                 
    }                               
 },true)

• 主页面右滑打开侧菜单栏

_self.drag({direction:'right',moveMode:'followFinger'}, {view:menu,moveMode:'follow'}, function(e){
       mask.show()                                                                                              
           if(e.type=="end"){              //右滑处理                                                 
         if(e.id=='main'){
            mask.close();  
        }
            }            
});

注意右滑时如果没有滑到侧滑菜单页面就终止了右滑操作，页面还是停留在主页面时需要关闭遮罩蒙版

• 菜单页面左滑关闭侧滑菜单页面

menu.drag({direction:'left',moveMode:'followFinger'}, {view:_self,moveMode:'follow'}, function(e){                                                    
           mask.show()                                                                                              
           if(e.type=="end"){                                                           
         if(e.id=='main'){
             mask.close();
         }
              }                                                     
});

• drag-设置Webview窗口的滑屏操作手势

 void  wobj.drag(options, otherView, callback); 
//options  当Webview窗口操作手势配置参数
//otherView (可选) 操作手势关联的窗口配置参数
//callback (可选) 滑屏操作回调函数