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

/ 650 次浏览/ APP开发

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页面右滑弹出菜单。


<< 上一篇

HBuilder开发App教程08-几种页面打开方式

下一篇 >>

HBuilder开发App教程10-完成事项

相关文章