侧滑菜单
功能
上节讲到了列表页，这节讲一个比较常用的功能，侧滑菜单，
在本app中策划菜单用来记录已经完成的事项。
实现方式
用Hbuilder实现类似侧滑菜单这样原生app功能，一般有两种实现方式，详见：这里。
一是webview实现，二是div模拟实现，
两者的区别是div实现简答，但是偶尔效果不是很好，
而webview实现稍微复杂，页面传值也复杂，但是效果好点，一般推荐webview实现方式。
index.html
代码
index.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();
}
};
});
获取主页面
很多时候你需要在其他页面获取主页面，但是默认主页面是自动加载的，也就是没有明确指定id，
那么id怎么获取呢，需要调用一个nativejs方法：
qiao.h.indexPage = function(){
return plus.webview.getWebviewById(plus.runtime.appid);
};
预加载菜单页面
之前说open页面有几种方式，这里用预加载的方式加载menu页面，
弹出菜单
可以从右上角的菜单图标弹出，或者从系统默认的菜单按键弹出，分别添加事件：
qiao.on(‘.mui-icon-bars‘, ‘tap‘, opMenu); mui.menu = opMenu;
其中qiao.on只是对jq的on方法的封装。
隐藏菜单
当点击遮罩，或者点击系统后退，系统菜单时需要隐藏菜单：
main.addEventListener(‘maskClick‘, opMenu);
// 退出
mui.back = function(){
if($(‘.adda‘).is(‘:hidden‘)){
hideAdd();
}else if(showMenu){
closeMenu();
}else{
qiao.h.exit();
}
};
相关方法
列出弹出菜单和隐藏菜单的方法，供其他地方调用：
// 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);
}
结合一个标志shouMenu进行弹出或者隐藏菜单。
总结
到这里index页面菜单相关就做完了，
主要是，1.预加载菜单页面，2.系统菜单，右上角菜单，3系统菜单，系统后退，点击遮罩隐藏菜单。
list.html
右滑弹出菜单
上面只是在index.html定义了一些隐藏弹出菜单的方式，
不管是系统菜单按钮，系统后台按钮，遮罩都是在index页面进行监听的，
而最常用的右滑弹出菜单却不在index页面，因为list页面占到首页大部分，所以将右滑事件放到list页面。
// 右滑菜单
window.addEventListener(‘swiperight‘, function(){
qiao.h.indexPage().evalJS("opMenu();");
});
这里注意，是调用的index的菜单操作方法。
页面件传值和操作，比较常用的一种方法就是先获取页面对象然后调用evaljs即可。
默认事件
// 初始化
mui.init({
keyEventBind : {
backbutton : false,
menubutton : false
},
gestureConfig : {
longtap:true
}
});
之前说到mui.init会初始化一些默认事件，
由于系统菜单按钮和后退按钮都在index页面监听了，所以其他页面的这两个按钮监听就都禁用了。
回顾
至此，右滑菜单功能就完成了，
1.使用webview方式实现
2.index页面监听了系统菜单按钮，系统后退按钮来弹出隐藏侧滑菜单
3.list页面禁用了系统菜单按钮，系统后退按钮
4.index页面点击右上角图标，点击遮罩弹出隐藏侧滑菜单
5.list页面右滑弹出菜单。
更多教程：
HBuilder开发App教程：http://uikoo9.com/book/detail/3
更多学习笔记：http://uikoo9.com/book
版权声明：本文为博主原创文章，未经博主允许不得转载。