- 先创建侧菜单栏页面
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 (可选) 滑屏操作回调函数
