• 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,
        '70%'
    }
    });
    },300);

    });

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

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

           void plus.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");

  • 相关阅读:
    一款JS+CSS实现的无缝平滑图片滚动代码
    2个按钮控制的左右图片滚动特效代码
    JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
    用CSS实现图片水印效果代码
    用鼠标拖动图片的JS代码
    一款实用的JavaScript图片幻灯片代码
    摘自搜狐女人频道的图片切换的JS代码
    JS防PS里的图片拖拉缩放效果代码
    鼠标移至图片后抖动的JS代码
    WINDOWS补丁的多线程下载方法和安装技巧
  • 原文地址:https://www.cnblogs.com/bearhb/p/5050557.html
Copyright © 2020-2023  润新知