HBuilder开发--侧滑菜单

HBuilder开发--侧滑菜单

侧滑菜单在本APP中是用来记录用户登录信息的

实现方式：

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

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

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

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

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

        }

    };

});

获取主页面：

qiao.h.indexPage = function(){

    return plus.webview.getWebviewById(plus.runtime.appid);

};

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

// 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);

}