烟雨江南
烟雨江南
  • 发布:2015-04-14 15:42
  • 更新:2015-04-15 09:39
  • 阅读:2444

打开/关闭/返回:链式页面

分类:MUI

如图:需求-----从A页面依次打开到→B→C。。。。。等多个页面之后,返回时也是依次关闭(。。。C→B→A)。
说明:hello mui的i打开方法,若打开一个子页面问题不大,打开多个,则会返回时立刻跳到首页(A)
hello H5+中的打开方法,可以实现依次打开又能依次关闭,但是,打开的时候等待时间略久。
问题:有没有比较好或者说比较简单的链式打开方式和后退方式。还是说我哪里处理的不OK?劳烦解惑。

2015-04-14 15:42 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

你是如何打开页面的?

烟雨江南

烟雨江南 (作者) - 随便来

 //处理右上角关于图标的点击事件;  
            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('input.html');  
                    //修改共用父模板的标题  
                    mui.fire(template, 'updateHeader', {  
                        title: 'input',  
                        showMenu: false  
                    });  
                    template.show('slide-in-right', 150);  
                }  
            });

之前用这种打开的,但是后来发现从很遥远的地方(C之后的页面)直接返回到首页了。
后来,就用hello h5+的那种打开方式,效果还好,但是,没有跟H5+首页那样第二次打开就快一些,而是每次打开都会出现等待框。

  • DCloud_App_Array

    第二次打开快是因为在点击返回时没有关闭Webview窗口(而是隐藏了),再次打开只是从隐藏状态显示:参考HelloH5应用中的index.html的clicked方法。

    2015-04-14 16:24

  • 烟雨江南 (作者)

    回复 DCloud_App_Array:

    好的,谢谢你,我去试试,有问题在留言给你。

    2015-04-14 16:29

烟雨江南

烟雨江南 (作者) - 随便来

<li onclick="clicked(this.id)" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="a.html">  
<a>  
<span class="mui-icon mui-icon-contact"></span>  
<div class="mui-media-body">档案</div>  
</a>  
</li>
<script type="text/javascript" charset="utf-8">  
             //取消浏览器的所有事件,使得active的样式在手机上正常生效  
            document.addEventListener('touchstart', function() {  
                return false;  
            }, true);  
             // 禁止选择  
            document.oncontextmenu = function() {  
                return false;  
            };  
             // H5 plus事件处理  
            var as = 'slide-in-right',  
                at = 200; // 默认动画时间  
            function plusReady() {  
                // 隐藏滚动条  
                plus.webview.currentWebview().setStyle({  
                    scrollIndicator: 'none'  
                });  
                // Android处理返回键  
                plus.key.addEventListener('backbutton', function() {  
                    if (confirm('确认退出?')) {  
                        plus.runtime.quit();  
                    }  
                }, false);  
                compatibleAdjust();  
            }  
            if (window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener('plusready', plusReady, false);  
            }  
             // DOMContentLoaded事件处理  
            var _domReady = false;  
            document.addEventListener('DOMContentLoaded', function() {  
                _domReady = true;  
                compatibleAdjust();  
            }, false);  
             // 兼容性样式调整  
            var _adjust = false;  

            function compatibleAdjust() {  
                    if (_adjust || !window.plus || !_domReady) {  
                        return;  
                    }  
                    _adjust = true;  
                    // iOS平台使用div的滚动条  
                    if ('iOS' == plus.os.name) {  
                        as = 'pop-in';  
                        at = 300;  
                        document.getElementById('content').className = 'scontent';  
                    }  
                    // 预创建二级窗口  
                    preateWebviews();  
                    // 关闭启动界面  
                    setTimeout(function() {  
                        plus.navigator.closeSplashscreen();  
                    }, 500);  
                }  
                // 处理点击事件  
            var _openw = null;  

            function clicked(id) {  
                    if (_openw) {  
                        return;  
                    }  
                    _openw = preate[id];  
                    if (_openw) {  
                        if (_openw.showded) {  
                            _openw.show(as, at);  
                        } else {  
                            _openw.show(as, at);  
                            _openw.showded = true;  
                        }  
                        _openw = null;  
                    } else {  
                        var wa = plus.nativeUI.showWaiting();  
                        _openw = plus.webview.create(id, id, {  
                            scrollIndicator: 'none',  
                            scalable: false,  
                            popGesture: 'hide'  
                        }, {  
                            preate: true  
                        });  
                        preate[id] = _openw;  
                        _openw.addEventListener('loaded', function() { //叶面加载完成后才显示  
                            //      setTimeout(function(){//延后显示可避免低端机上动画时白屏  
                            wa.close();  
                            _openw.show(as, at);  
                            _openw.showded = true;  
                            _openw = null;  
                            //      },200);  
                        }, false);  
                        _openw.addEventListener('close', function() { //页面关闭后可再次打开  
                            _openw = null;  
                            preate[id] && (preate[id] = null); //兼容窗口的关闭  
                        }, false);  
                    }  
                }  
                // 预创建二级页面  
            var preate = {};  

            function preateWebviews() {  
                preateWebivew('plus/webview.html');  
                var plist = document.getElementById('plist').children;  
                // 由于启动是预创建过多Webview窗口会消耗较长的时间,所以这里限制仅创建5个  
                for (var i = 0; i < plist.length && i < 2; i++) {  
                    var id = plist[i].id;  
                    id && (id.length > 0) && preateWebivew(id);  
                }  
            }  

            function preateWebivew(id) {  
                    if (!preate[id]) {  
                        var w = plus.webview.create(id, id, {  
                            scrollIndicator: 'none',  
                            scalable: false,  
                            popGesture: 'hide'  
                        }, {  
                            preate: true  
                        });  
                        preate[id] = w;  
                        w.addEventListener('close', function() { //页面关闭后可再次打开  
                            _openw = null;  
                            preate[id] && (preate[id] = null); //兼容窗口的关闭  
                        }, false);  
                    }  
                }  
                // 清除预创建页面(仅)  

            function preateClear() {  
                for (var p in preate) {  
                    var w = preate[p];  
                    if (w && w.showded && !w.isVisible()) {  
                        w.close();  
                        preate[p] = null;  
                    }  
                }  
            }  
        </script>

为什么打开的时候,第一次的时候无等待打开,第二次之后的点击都需要等待呢?hello H5+官方的却可以第二次点击无等待!我是不是哪里处理漏掉了?都是一样的代码呀(JS),

  • DCloud_App_Array

    不要关闭新打开的窗口,而是隐藏。在HelloH5中是这么处理的:


    // 处理返回事件  
    w.back=function(hide){
    if(w.plus){
    ws||(ws=plus.webview.currentWebview());
    if(hide||ws.preate){
    ws.hide('auto',at);
    }else{
    ws.close('auto',at);
    }
    }else if(history.length>1){
    history.back();
    }else{
    w.close();
    }
    };

    2015-04-15 14:48

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