HBuilder開發App教程09-側滑菜單

側滑菜單

功能

上節講到了列表頁，這節講一個比較常用的功能，側滑菜單，

在本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