HeHao
HeHao
  • 发布:2016-05-12 15:34
  • 更新:2016-05-15 23:59
  • 阅读:1935

tab选项卡,加上webview侧滑菜单,show 选项卡里面的子页面 出现在侧滑菜单

分类:MUI
var current = "NewsList.html";  
    var menu = null,  
                main = null;  
            var showMenu = false;  
            var subpage = ["NewsList.html","Login.html", "NewsList1.html", "guide.html"];  
            var subpage_styles = {  
                top: '45px',  
                bottom: "50px"  
            }  
            mui.init({  
                subpages: [{  
                    url: "NewsList.html",  
                    id: "NewsList.html",  
                    styles: {  
                        top: "45px",  
                        bottom: "50px",  
                        bounce: 'vertical'  
                    }  
                }]  
//              preloadPages: [{  
//                  id: "detail.html",  
//                  url: "detail.html"  
//              }]  
            });  
            var myname;  
            mui.plusReady(function() {  
                //创建其他三个页面  
                for (var i = 0; i < subpage.length; i++) {  
                    var sub = plus.webview.create(subpage[i],  
                        subpage[i],  
                        subpage_styles);  
                    sub.hide();  
                }  
                plus.webview.show("NewsList.html");  
                mui("#muiBar").on("tap", "a", function() {  

                    var target = this.getAttribute("href");  
                    if(target!=current){  
                        plus.webview.hide(current);  
                    plus.webview.show(target);  

                    current = target;  
                    }  
                    //                  alert(target);  

                })  

            plus.screen.lockOrientation("portrait-primary");  
                main = plus.webview.currentWebview();  
                main.addEventListener('maskClick', closeMenu);  
                //处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面;  
                setTimeout(function() {  
                    menu = mui.preload({  
                        id: 'index-menu',  
                        url: 'Setting.html',  
                        styles: {  
                            left: 0,  
                            width: '70%',  
                            zindex: -1  
                        },  
                        show: {  
                            aniShow: 'none'  
                        }  
                    });  
                }, 200);  
            });  
            var isInTransition = false;  
            /**  
             * 显示侧滑菜单  
             */  
            function openMenu() {  
                if (isInTransition) {  
                    return;  
                }  
                if (!showMenu) {  
                    //侧滑菜单处于隐藏状态,则立即显示出来;  
                    isInTransition = true;  
                    menu.setStyle({  
                        mask: 'rgba(0,0,0,0)'  
                    }); //menu设置透明遮罩防止点击  
                    menu.show('none', 0, function() {  
                        //主窗体开始侧滑并显示遮罩  
                        main.setStyle({  
                            mask: 'rgba(0,0,0,0.4)',  
                            left: '70%',  
                            transition: {  
                                duration: 150  
                            }  
                        });  
                        mui.later(function() {  
                            isInTransition = false;  
                            menu.setStyle({  
                                mask: "none"  
                            }); //移除menu的mask  
                        }, 160);  
                        showMenu = true;  
                    });  
                }  
            };  
            /**  
             * 关闭菜单  
             */  
            function closeMenu() {  
                if (isInTransition) {  
                    return;  
                }  
                if (showMenu) {  
                    //关闭遮罩;  
                    //主窗体开始侧滑;  
                    isInTransition = true;  
                    main.setStyle({  
                        mask: 'none',  
                        left: '0',  
                        transition: {  
                            duration: 200  
                        }  
                    });  
                    showMenu = false;  
                    //等动画结束后,隐藏菜单webview,节省资源;  
                    mui.later(function() {  
                        isInTransition = false;  
                        menu.hide();  
                    }, 300);  
                }  
            };  
            //点击左上角侧滑图标,打开侧滑菜单;  
            document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {  
                if (showMenu) {  
                    closeMenu();  
                } else {  
                    openMenu();  
                }  
            });  
            //敲击顶部导航,内容区回到顶部  
            document.querySelector('header').addEventListener('doubletap', function() {  
                main.children()[0].evalJS('mui.scrollTo(0, 100)');  
            });  
            //主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作  
            window.addEventListener("swiperight", openMenu);  
            //主界面向左滑动,若菜单已显示,则关闭菜单;否则,不做任何操作;  
            window.addEventListener("swipeleft", closeMenu);  
            //侧滑菜单触发关闭菜单命令  
            window.addEventListener("menu:close", closeMenu);  
            window.addEventListener("menu:open", openMenu);  
            //重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;  
            mui.menu = function() {  
                    if (showMenu) {  
                        closeMenu();  
                    } else {  
                        openMenu();  
                    }  
                }  
2016-05-12 15:34 负责人:无 分享
已邀请:
凌凌

凌凌

我也碰到一样的问题

赵梦欢

赵梦欢 - 专注前端,乐于分享!

建议侧滑用一个webview层实现,可以参考hello html5+ app 里面那个webview的最后一个例子

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