侧滑菜单
功能
上节讲到了列表页,这节讲一个比较常用的功能,侧滑菜单,
在本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页面右滑弹出菜单。