HBuilder开发--侧滑菜单
作者：陈伟忠 撰写时间：2019年5月7号
侧滑菜单在本APP中是用来记录用户登录信息的
实现方式：
用Hbuilder实现类似侧滑菜单这样原生app功能，一般有两种实现方式，
一是webview实现，二是div模拟实现，
两者的区别是div实现简答，但是偶尔效果不是很好，
而webview实现稍微复杂，页面传值也复杂，但是效果好点，一般推荐webview实现方式。
JS代码：
var main = null;
var showMenu = false;
var menu = null;
var add = null;
var detail = null;
// 所有方法都放到这里
mui.plusReady(function(){
// 初始化数据库
initDb();
// 侧滑菜单
main = qiao.h.indexPage();
var menuoptions = qiao.h.page('menu', {
styles : {
left:0,
width:'70%',
zindex:-1
}
});
menu = mui.preload(menuoptions);
qiao.on('.mui-icon-bars', 'tap', opMenu);
main.addEventListener('maskClick', opMenu);
mui.menu = opMenu;
// 退出
mui.back = function(){
if($('.adda').is(':hidden')){
hideAdd();
}else if(showMenu){
closeMenu();
}else{
qiao.h.exit();
}
};
});
获取主页面：
qiao.h.indexPage = function(){
return plus.webview.getWebviewById(plus.runtime.appid);
};
列出弹出菜单和隐藏菜单的方法，供其他地方调用：
// menu
function opMenu(){
if(showMenu){
closeMenu();
}else{
openMenu();
}
}
function openMenu(){
if($('.adda').is(':visible')){
menu.show('none', 0, function() {
main.setStyle({
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 150
}
});
showMenu = true;
});
}
}
function closeMenu(){
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 100
}
});
showMenu = false;
setTimeout(function() {
menu.hide();
}, 300);
}