HBuilder开发App教程09-侧滑菜单

1.jpg

侧滑菜单

功能

上节讲到了列表页,这节讲一个比较常用的功能,侧滑菜单,

在本app中策划菜单用来记录已经完成的事项。

实现方式

用Hbuilder实现类似侧滑菜单这样原生app功能,一般有两种实现方式,详见:这里

一是webview实现,二是div模拟实现,

两者的区别是div实现简答,但是偶尔效果不是很好,

而webview实现稍微复杂,页面传值也复杂,但是效果好点,一般推荐webview实现方式。


index.html

代码

index.js中需要添加如下代码,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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方法:

1
2
3
qiao.h.indexPage = function(){
    return plus.webview.getWebviewById(plus.runtime.appid);
};

预加载菜单页面

之前说open页面有几种方式,这里用预加载的方式加载menu页面,

弹出菜单

可以从右上角的菜单图标弹出,或者从系统默认的菜单按键弹出,分别添加事件:

1
2
qiao.on('.mui-icon-bars''tap', opMenu);
mui.menu = opMenu;

其中qiao.on只是对jq的on方法的封装。

隐藏菜单

当点击遮罩,或者点击系统后退,系统菜单时需要隐藏菜单:

1
2
3
4
5
6
7
8
9
10
11
12
    main.addEventListener('maskClick', opMenu);
     
    // 退出
    mui.back = function(){
        if($('.adda').is(':hidden')){
            hideAdd();    
        }else if(showMenu){
            closeMenu();
        }else{
            qiao.h.exit();
        }
    };

相关方法

列出弹出菜单和隐藏菜单的方法,供其他地方调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 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页面。

1
2
3
4
// 右滑菜单
    window.addEventListener('swiperight'function(){
        qiao.h.indexPage().evalJS("opMenu();");
    });

这里注意,是调用的index的菜单操作方法。

页面件传值和操作,比较常用的一种方法就是先获取页面对象然后调用evaljs即可。

默认事件

1
2
3
4
5
6
7
8
9
10
// 初始化
mui.init({
    keyEventBind : {
        backbutton : false,
        menubutton : false
    },
    gestureConfig : {
        longtap:true
    }
});

之前说到mui.init会初始化一些默认事件,

由于系统菜单按钮和后退按钮都在index页面监听了,所以其他页面的这两个按钮监听就都禁用了。


回顾

至此,右滑菜单功能就完成了,

1.使用webview方式实现

2.index页面监听了系统菜单按钮,系统后退按钮来弹出隐藏侧滑菜单

3.list页面禁用了系统菜单按钮,系统后退按钮

4.index页面点击右上角图标,点击遮罩弹出隐藏侧滑菜单

5.list页面右滑弹出菜单。