html app 侧滑菜单,Hbuilder开发HTML5 APP之侧滑菜单

1.思路:

其时有2个WebView,一个main是用来装主页面,一个menu是用来装菜单(为提高性能,菜单项是采用了预加载方式的,预加载时为了避免和主页面争夺资源,采用延时加载,例如:

//plusReady事件后,自动创建menu窗口;

mui.plusReady(function() {

main = plus.webview.currentWebview();

//setTimeout的目的是等待窗体动画结束后,再执行create webview操作,避免资源竞争,导致窗口动画不流畅;

setTimeout(function () {

//侧滑菜单默认隐藏,这样可以节省内存;

menu = mui.preload({

id: 'offcanvas-drag-right-plus-menu',

url: 'offcanvas-drag-right-plus-menu.html',

styles: {

left: 0,

width: '70%'

}

});

},300);

});

2.    所谓侧滑,就是控制菜单WebView的显示,使用它的left来定位左边位置;

3.    要打开新的webView,要注意webview的show方法使用:

voidplus.webview.show(id_wvobj,aniShow,duration,showedCB,extras );

参数含义:(1)是webview对象   (2)动画效果,从没显示过,一般用"none",(3)动画过渡时间 (4)当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。(5)传递的参数;

4.显示的方法:

(1)按钮点击后,让menu直接show出来,并对main设置样式,比如

menu.show("none",0,function(){

main.setStyle({

left:"70%",

transition:{

duration:150

}

});

});

(2)关闭侧滑菜单,实际就是设置main的样式了,比如:

main.setStyle({

left: '0',

transition: {

duration: 150

}

});

另外注意窗体切换完成后要关掉menu

//等窗体动画结束后,隐藏菜单webview,节省资源;

setTimeout(function() {

menu.hide();

}, 200);

5.被打开的WebView的界面如何控制关闭侧滑菜单:

(1)先要找到主页面,main = plus.webview.currentWebview().opener();

(2)激发主页面的某个事件,例如:mui.fire(main,"menu:swipeleft");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值