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();        }    };

相關方法

列出快顯功能表和隱藏菜單的方法，供其他地方調用：

// menufunction 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

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

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