晓风7
晓风7
  • 发布:2015-02-05 17:13
  • 更新:2015-02-05 17:49
  • 阅读:1355

侧滑菜单卡顿

分类:MUI

单个webview 用侧滑导航菜单切换都正常 当打开3个webview以上时 侧滑菜单关闭会明显卡顿
注:侧滑菜单用的是webview模式 所有页面共用

2015-02-05 17:13 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

这么说肯定解决不了问题,不知道你代码怎么写的。

晓风7

晓风7 (作者)

附上侧滑代码:
menu = mui.openWindow({
id: 'publicUpperRight',
url: 'publicUpperRight.html',
styles: {
left: "30%",
width: "252px",
height: "378px",
top:"44px",
zindex: 997
},
show: {
autoShow:false,//页面loaded事件发生后自动显示,默认为true
aniShow: 'none'
},
waiting: {
autoShow: false
}
});

/*

  • 显示菜单菜单
    */
    function openMenu() {
    if (!showMenu) {
    //解决android 4.4以下版本webview移动时,导致fixed定位元素错乱的bug;
    if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
    document.querySelector("header.mui-bar").style.position = "static";
    //同时需要修改以下.mui-contnt的padding-top,否则会多出空白;
    document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
    }

                    //侧滑菜单处于隐藏状态,则立即显示出来;  

    // menu.show('none', 0, function() {
    switch (mode){
    case 'main-move':
    menu.show('none',0,function () {

                            });  
                            //主窗体开始侧滑;  
                            main.setStyle({  
                                left: '-70%',  
                                transition: {  
                                    duration: 150  
                                }  
                            });  

    // console.log('main:'+menu.getStyle().left+','+menu.getStyle().zindex);
    break;
    case 'menu-move':
    // console.log('menu-1:'+menu.getStyle().left+','+menu.getStyle().zindex);
    menu.show('none',0,function () {
    menu.setStyle({
    left: '30%',
    transition: {
    duration: 150
    }
    });
    });
    console.log('menu-2:'+menu.getStyle().left+','+menu.getStyle().zindex);
    break;
    case 'all-move':
    main.setStyle({
    left: '-70%',
    transition: {
    duration: 150
    }
    });
    menu.setStyle({
    left: '30%',
    transition: {
    duration: 150
    }
    });
    break;
    }
    // });
    //显示主窗体遮罩

                    mask.show();  
                    //内容窗口遮罩  
                    /*var contentWebview=plus.webview.getWebviewById(uid+"-body");  
                    mui.fire(contentWebview, 'hideContent', {  
                        isShow: true  
                    });    
                    */  
                    showMenu = true;  
                }  
            }  
            /**  
             * 关闭侧滑菜单  
             */  
    
        function closeMenu() {  
            if (showMenu) {  
                //解决android 4.4以下版本webview移动时,导致fixed定位元素错乱的bug;  
                if (mui.os.android && parseFloat(mui.os.version) < 4.4) {  
                    document.querySelector("header.mui-bar").style.position = "fixed";  
                    //同时需要修改以下.mui-contnt的padding-top,否则会多出空白;  
                    document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";  
                }  
                switch (mode){  
                    case 'main-move':  
                        //主窗体开始侧滑;  
                        main.setStyle({  
                            left: '0',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
                        break;  
                    case 'menu-move':  
                        //主窗体开始侧滑;  
                        menu.setStyle({  
                            left: '100%',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
                        break;  
                    case 'all-move':  
                        //主窗体开始侧滑;  
                        main.setStyle({  
                            left: '0',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
                        //menu页面同时移动  
                        menu.setStyle({  
                            left: '100%',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
    
                        break;  
                }  
                showMenu = false;  
                //等窗体动画结束后,隐藏菜单webview,节省资源;  
                setTimeout(function() {  
                    menu.hide();  
                }, 300);  
                //内容窗口遮罩  
                    /*var contentWebview=plus.webview.getWebviewById(uid+"-body");  
                    mui.fire(contentWebview, 'hideContent', {  
                        isShow: false  
                    });    
                    */  
    
            }  
        }  

    //点击侧滑图标,打开侧滑菜单;
    document.querySelector('.mui-action-menu').addEventListener('tap', openMenu);
    //在android4.4中的swipe事件,需要preventDefault一下,否则触发不正常
    //故,在dragleft,dragright中preventDefault
    window.addEventListener('dragright', function(e) {
    e.detail.gesture.preventDefault();
    });
    window.addEventListener('dragleft', function(e) {
    e.detail.gesture.preventDefault();
    });
    //主界面向左滑动,若菜单未显示,则显示菜单;否则不做任何操作;
    window.addEventListener("swipeleft", openMenu);
    //主界面向右滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;
    window.addEventListener("swiperight", closeMenu);
    //menu页面向右滑动,关闭菜单;
    window.addEventListener("menu:swiperight", closeMenu);

该问题目前已经被锁定, 无法添加新回复