注册 登录
arthur
arthur
  • 发布：2015-03-13 20:45
  • 更新：2018-07-23 09:41
  • 阅读：6607

mui制作的app，入口页面是Login时所遇的几个问题？

分类：MUI

问题已更新
第二个第三个问题依然存在，下面的回复里面已经把三个页面的代码都贴上来了
1.第一个问题按照大神的指点已经解决
2.第二个问题，[这里换成fade后依然没有效果，后面的回复已经把三个页面的全部代码发上来了]
3.第三个问题，[用的是原生的hello-mui，基本没怎么改js，改的只是html，测试依然有问题]

入口页面index.html
此页面和mui示例中的index.html页面基本一样

mui.init({  
        swipeBack: false,  
                keyEventBind: {  
                     backbutton: false  
                },  
        /*subpages: [{  
            id: 'list',  
            url: 'list.html',  
            styles: {  
                top: '45px',  
                bottom: 0,  
                bounce: 'vertical'  
            }  
        }],  
                */  
                gestureConfig:{  
                     tap: false,  
                     doubletap: false,  
                     longtap: false,  
                     swipe: false,  
                     drag: false,  
                     hold:false,  
                     release:false  
                }  
});  
...  
mui.plusReady(function() {  
...  
main = plus.webview.currentWebview();  
var sub = plus.webview.create('list.html', 'list.html', {  
                top: '68px',  
                bottom: 0,  
                bounce: 'vertical'});  
main.append(sub);  
var initView = plus.webview.create('login.html', 'login.html', {  
                top: '0px',  
                bottom: '0px'});  
main.append(initView);  
...  
});

list.html此为主页内容

mui.init({  
    preloadLimit: 5,   
    swipeBack: false,  
    keyEventBind: {  
              backbutton: false  
    }  
});

login.html登录页

mui.init({  
    preloadLimit: 5,   
    swipeBack: false,  
    keyEventBind: {  
              backbutton: false  
    }  
});  
...  
// 关闭自身窗口,在登录按钮上出发closeme()  
function closeme(){  
    plus.webview.close("login.html","flip-ry",300);  
}

问题说明：
1.实际运行时会最先出现header部分，其它地方相当于白屏，持续约一二秒后跳出login.html页面，此白屏能避免吗？[些问题已经解决]

  1. 在login.html页面时，触发closeme()关闭login页面，不过“flip-ry”并未生效，login页面关闭的非常生硬，关闭后会自动显示出list.html。[这里换成fade后依然没有效果，后面的回复已经把三个页面的全部代码发上来了]
  2. 在iOS中其他均正常，但在安卓上当出现在的list.html后点击手机上的“返回”时会只留下header部分，其他全是白色（后面测试了在login.html页面点“返回”时一切正常，不过在触发closeme时，不会出现list.html页面了）[用的是原生的hello-mui，基本没怎么改js，改的只是html，测试依然有问题]
2015-03-13 20:45 负责人:无 分享

没有找到相关结果

    已邀请:
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    1.先出现header，其他白屏的问题：

    在manifest.json中配置splashscreen的autoclose为false.，然后在list.html里边在合适的时候：

    plus.navigator.closeSplashscreen();

    2.flip-ry效果：暂时不建议使用flip效果，尚需完善，建议使用slide或fade效果实现

    1. 返回按键只留下header的问题，请排查是否自己监听了backbutton按键事件，导致返回把list.html关闭或隐藏了。
    2015-03-13 21:34 分享
    arthur

    arthur (作者)

    1.第一个问题按照大神指点已经解决了

    2.其中第二个问题依然存在

    function closeme(){  
       plus.webview.close("login.html","fade-out",1000)  
}

    这样的写法只起到关闭页面的作用了，fade-out、fade-in等等都试过一点用处没有

    3.第三个问题还是依旧存在，很闹心啊

    这里，我将三个页面的全部代码放上来，大神给瞅瞅

    index.html

    
<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="css/mui.min.css">  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-icon mui-icon-bars mui-pull-left"></a>  
        <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>  
        <h1 class="mui-title">Hello mui</h1>  
    </header>  
    <script src="js/mui.min.js"></script>  
    <script src="js/update.js" type="text/javascript" charset="utf-8"></script>  
    <script>  
        var menu = null,  
            main = null;  
        var showMenu = false;  
        mui.init({  
            swipeBack: false,  
            //statusBarBackground: '#f7f7f7',  
            gestureConfig:{  
                doubletap:true  
            },/*  
            subpages: [{  
                id: 'list',  
                url: 'list.html',  
                styles: {  
                    top: '45px',  
                    bottom: 0,  
                    bounce: 'vertical'  
                }  
            }]*/  
            keyEventBind: {  
                 backbutton: false  
            },  
            /*subpages: [{  
                id: 'home',  
                url: 'page/home.html',  
                styles: {  
                    top: '45px',  
                    bottom: 0,  
                    bounce: 'vertical'  
                }  
            }],  
            */  
            gestureConfig:{  
                 tap: false,  
                 doubletap: false,  
                 longtap: false,  
                 swipe: false,  
                 drag: false,  
                 hold:false,  
                 release:false  
            }  
        });  

        mui.plusReady(function() {  
            plus.screen.lockOrientation("portrait-primary");          
            if (mui.os.android) {  
                plus.screen.lockOrientation("portrait-primary");  
            }  
            main = plus.webview.currentWebview();  
            main.addEventListener('maskClick', closeMenu);  
            //处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；  
            setTimeout(function() {  
                menu = mui.preload({  
                    id: 'index-menu',  
                    url: 'index-menu.html',  
                    styles: {  
                        left: 0,  
                        width: '70%',  
                        zindex: -1  
                    },  
                    show: {  
                        aniShow: 'none'  
                    }  
                });  
            }, 200);  

        var sub = plus.webview.create('grid-default.html', 'grid-default.html', {  
                                      top: '68px',  
                                      bottom: 0,  
                                      bounce: 'vertical'});  

        main.append(sub);  
        var initView = plus.webview.create('login.html', 'login.html', {  
                                    top: '0px',  
                                    bottom: '0px'});  
        main.append(initView);  

        });  

        /**  
         * 显示侧滑菜单  
         */  
        function openMenu() {  
            if (!showMenu) {  
                //侧滑菜单处于隐藏状态，则立即显示出来；  
                menu.show('none', 0, function() {  
                    //主窗体开始侧滑并显示遮罩  
                    main.setStyle({  
                        mask: 'rgba(0,0,0,0.4)',  
                        left: '70%',  
                        transition: {  
                            duration: 150  
                        }  
                    });  
                    showMenu = true;  
                });  
            }  
        }  
        /**  
         * 关闭菜单  
         */  
        function closeMenu() {  
            if (showMenu) {  
                //关闭遮罩；  
                //主窗体开始侧滑；  
                main.setStyle({  
                    mask: 'none',  
                    left: '0',  
                    transition: {  
                        duration: 200  
                    }  
                });  
                showMenu = false;  
                //等动画结束后，隐藏菜单webview，节省资源；  
                setTimeout(function() {  
                    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();  
            }  
        }  

         //处理右上角关于图标的点击事件；  
        var subWebview = null,  
            template = null;  
        document.getElementById('info').addEventListener('tap', function() {  
            if (subWebview == null) {  
                //获取共用父窗体  
                template = plus.webview.getWebviewById("default-main");  
            }  
            if(template){  
                subWebview = template.children()[0];  
                subWebview.loadURL('examples/info.html');  
                //修改共用父模板的标题  
                mui.fire(template, 'updateHeader', {  
                    title: '关于',  
                    showMenu: false  
                });  
                template.show('slide-in-right', 150);  
            }  
        });  

         //首页返回键处理  
         //处理逻辑：1秒内，连续两次按返回键，则退出应用；  
        var first = null;  
        mui.back = function() {  
            if (showMenu) {  
                closeMenu();  
            } else {  
                //首次按键，提示‘再按一次退出应用’  
                if (!first) {  
                    first = new Date().getTime();  
                    mui.toast('再按一次退出应用');  
                    setTimeout(function() {  
                        first = null;  
                    }, 1000);  
                } else {  
                    if (new Date().getTime() - first < 1000) {  
                        plus.runtime.quit();  
                    }  
                }  
            }  
        };  
    </script>  
</body>

    </html>

    
> login.html
```javascript  
<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            header.mui-bar{  
                display: none;  
            }  
            .mui-bar-nav~.mui-content{  
                padding: 0;  
            }  
            p {  
                text-indent: 22px;  
                padding: 5px 8px;  
            }  
            html,body,.mui-content {  
                background-color: #fff;  
            }  
            h4 {  
                margin-left: 5px;  
            }  
        </style>  
    </head>  
    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">关于</h1>  
        </header>  
        <div class="mui-content" style="background: #007AFF; color: #fff;">  
            <div class="mui-content-padded">  
                <h4 style="margin-top:10px;">mui</h4>  
                <p>  
                    性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败 ； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。  
                </p>  
                <a class="mui-btn" style="width:100%; line-height:1.9em; margin-top:10px" onclick="closeme()" id="Main.html" title="合同管理系统">进入系统</a>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  

        <script type="text/javascript">  

    function plusReady(){  
        plus.navigator.closeSplashscreen();  
            plus.navigator.setStatusBarBackground("");  
        }  
    if(window.plus){  
        plusReady();  
    }else{  
        document.addEventListener("plusready",plusReady,false);  
    }  

    // 关闭自身窗口  
    function closeme(){  
        plus.webview.close("login.html","fade-out",1000)  
    }  
</script>  
    </body>  
</html>

    list.html

    
<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link rel="stylesheet" href="css/mui.min.css">  
    <script src="js/mui.min.js"></script>  
    <script src="js/app.js"></script>  
    <style type="text/css">  
        #list {  
            /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/  

            margin-top: -1px;  
        }  
    </style>  
</head>  

<body>  
    <div class="mui-content">  
        <ul id="list" class="mui-table-view mui-table-view-chevron">  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/accordion.html">  
                    accordion（折叠面板）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    actionsheet（操作表）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/actionsheet.html">  
                            H5模式actionsheet  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/actionsheet-plus.html">  
                            原生模式actionsheet  
                        </a>  
                    </li>  
                </ul>  
            </li>  

            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/ajax.html">  
                    ajax（网络请求）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/badges.html">  
                    badge（数字角标）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    button（按钮）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/buttons.html">  
                            普通按钮  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/buttons-with-icons.html">  
                            带图标的按钮  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/buttons-with-badges.html">  
                            带数字的按钮  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/buttons-with-block.html">  
                            块级按钮  
                        </a>  
                    </li>  
                    <!--<li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/buttons-with-fabs.html">  
                            浮动控制按钮  
                        </a>  
                    </li>-->  
                </ul>  

            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/checkbox.html">  
                    checkbox（复选框）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/dialog.html">  
                    dialog（消息框）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    gallery slider（图片轮播）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/slider-default.html">  
                            默认样式  

                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/slider-with-title.html">  
                            下方悬浮标题  

                        </a>  
                    </li>  
                </ul>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    gallery table（图文表格）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/slider-table-default.html">  
                            默认样式  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/slider-table-pagination.html">  
                            左右滑动分页样式  
                        </a>  
                    </li>  
                </ul>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    grid（9宫格）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/grid-default.html">  
                            默认样式  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/grid-pagination.html">  
                            可左右滑动的9宫导航  
                        </a>  
                    </li>  
                </ul>  
            </li>  

            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/icons.html">  
                    icon（图标）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/input.html">  
                    input（输入框）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    list（列表）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tableviews.html">  
                            普通列表  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tableviews-with-badges.html">  
                            右侧带数字角标  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/list-with-input.html">  
                            列表带input类控件  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/list-triplex-row.html">  
                            三行列表  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">  
                            二级列表  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">  
                            滑动触发列表项菜单  
                        </a>  
                    </li>  
                </ul>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/media-list.html">  
                    media list（图文列表）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" open-type="common" href="examples/nav.html">  
                    nav bar（导航栏）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    off canvas（侧滑导航）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html">  
                            webview模式右滑菜单  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html">  
                            webview模式左滑菜单  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right.html">  
                            div模式右滑菜单  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">  
                            div模式左滑菜单  
                        </a>  
                    </li>  
                </ul>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/pagination.html">  
                    pagination（分页）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/popovers.html">  
                    popover（弹出菜单）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/pullrefresh.html">  
                    pull to refresh（下拉刷新和上拉加载更多）  
                </a>  
            </li>  

            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/radio.html">  
                    radio（单选框）  
                </a>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/range.html">  
                    range（滑块）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    segment（分段选择）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">  
                            按钮式选项卡  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">  
                            可拖动选项卡(仿Android)  
                        </a>  
                    </li>  
                </ul>  
            </li>  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/switches.html">  
                    switch（开关）  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">  
                    tab bar（选项卡）  
                </a>  
                <ul class="mui-table-view mui-table-view-chevron">  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tabbar.html">  
                            div模式  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">  
                            webview模式  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tabbar-labels-only.html">  
                            文字选项卡  
                        </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">  
                            含二级菜单的选项卡  
                        </a>  
                    </li>  
                </ul>  
            </li>  

            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right" href="examples/typography.html">  
                    typography（文字）  
                </a>  
            </li>  
        </ul>  
    </div>  
    <script>  
        //只有ios支持的功能需要在Android平台隐藏；  
        if (mui.os.android) {  
            var list = document.querySelectorAll('.ios-only');  
            if (list) {  
                for (var i = 0; i < list.length; i++) {  
                    list[i].style.display = 'none';  
                }  
            }  
        }  

        mui.init({  
            preloadLimit: 5, //同时并存的预加载窗口数量  
            swipeBack: false,  
            keyEventBind: {  
                backbutton: false  
            }  
        });  
        var templates = {};  
        var getTemplate = function(name, header, content, loading) {  
            var template = templates[name];  
            if (!template) {  
                //预加载共用父模板；  
                var headerWebview = mui.preload({  
                    url:header,  
                    id:name+"-main",  
                    styles:{  
                        popGesture:"hide",  
                    },  
                    extras:{  
                        mType: 'main'  
                    }  
                });  
                //预加载共用子webview  
                var subWebview = mui.preload({  
                    url:!content?"":content,  
                    id:name+"-sub",  
                    styles:{  
                        top: '45px',  
                        bottom: '0px',  
                    },  
                    extras:{  
                        mType: 'sub'  
                    }  
                });  
                subWebview.addEventListener('loaded', function() {  
                    setTimeout(function() {  
                        subWebview.show();  
                    }, 50);  
                });  
                subWebview.hide();  
                headerWebview.append(subWebview);  

                //iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；  
                if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？  
                    headerWebview.addEventListener('hide', function() {  
                        subWebview.hide("none");  
                    });  
                }  
                templates[name] = template = {  
                    name: name,  
                    header: headerWebview,  
                    content: subWebview,  
                    loaded: loading  
                };  
            }  

            return template;  
        };  

        var initTemplates = function() {  
            getTemplate('pullrefresh', 'examples/template_pullrefresh.html', 'examples/pullrefresh.html', true);  
            getTemplate('default', 'examples/template.html');  
        };  

        mui.plusReady(function() {  
            //初始化模板  
            initTemplates(); //预加载所有模板    
            //关闭splash页面；  
            plus.navigator.closeSplashscreen();  
        });  

        //主列表点击事件  
        mui('#list').on('tap', 'a', function() {  
            var id = this.getAttribute('href');  
            var type = this.getAttribute("open-type");  
            if (type == "common") {  
                if (~id.indexOf('')) {  
                    var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";  
                    mui.openWindow({  
                        id: id,  
                        url: this.href,  
                        styles: {  
                            zindex: 9998,  
                            popGesture: pop  
                        },  
                        waiting: {  
                            autoShow: false  
                        }  
                    });  
                } else {  
                    mui.openWindow({  
                        id: id,  
                        url: this.href,  
                        waiting: {  
                            autoShow: false  
                        }  
                    });  
                }  
            } else {  
                if (id && ~id.indexOf('.html')) {  
                    var href = this.href;  
                    //获得共用模板组  
                    var template = ~href.indexOf('pullrefresh.html')?getTemplate('pullrefresh'):getTemplate('default');  
                    //判断是否显示右上角menu图标；  
                    var showMenu = ~href.indexOf('popovers.html')?true:false;  
                    //获得共用父模板  
                    var headerWebview = template.header;  
                    //获得共用子webview  
                    var contentWebview = template.content;  
                    var title = this.innerText.trim();  
                    //通知模板修改标题，并显示隐藏右上角图标；  
                    mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});  
                    var reload = true;  
                    if (!template.loaded) {  
                        if (contentWebview.getURL() != this.href) {  
                            contentWebview.loadURL(this.href);  
                        } else {  
                            reload = false;  
                        }  
                    } else {  
                        reload = false;  
                    }  
                    (!reload) && contentWebview.show();  

                    headerWebview.show('slide-in-right', 150);  
                }  
            }  
        });  

        var index = null;//主页面  
        function openMenu () {  
            !index&&(index = mui.currentWebview.parent());  
            mui.fire(index,"menu:open");      
        }  

        //在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常  
        window.addEventListener('dragstart',function(e){  
            mui.gestures.touch.lockDirection = true; //锁定方向  
            mui.gestures.touch.startDirection = e.detail.direction;  
        });  

        window.addEventListener('dragright', function(e) {  
            if(!mui.isScrolling){  
                e.detail.gesture.preventDefault();    
            }  
        });  

        //监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；  
        window.addEventListener("swiperight",function (e) {  
            //默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；  
            if(Math.abs(e.detail.angle)<4){  
                openMenu();  
            }  
        });  
    </script>  
</body>

    </html>

    2015-03-19 14:36 分享
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    最好给一个可以直接运行测试的测试工程。

    2015-03-19 14:58 分享
    arthur

    arthur (作者)

    测试工程见附件

    2015-03-19 15:02 分享
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    你这个测试工程，我应该怎么测试你所说的问题，步骤是什么

    2015-03-19 15:33 分享
    arthur

    arthur (作者)

    步骤比较简单
    1.用手机运行“归档”中的项目
    （默认会运行index.html,且同时加载list.html和login.html,而且会显示login.html）
    2.这时会显示一个登录按钮，此按钮的事件是closeme();

    function closeme(){  
       plus.webview.close("login.html","fade-out",1000)  
}

    （当执行closeme时，其fade-out没有生效，实际就是执行closeme时关闭login.html页面会很生硬）

    至于第三个问题测试用例还没弄出来

    2015-03-19 16:16 分享
    5***@qq.com

    5***@qq.com - wml

    怎么和首页还有底部菜单的 页面配合使用？

    2018-07-23 09:41 分享
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报