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

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值