CKHan
CKHan
  • 发布:2015-04-30 00:03
  • 更新:2015-04-30 15:50
  • 阅读:2201

页面切换卡的可以试试这个方法

分类:MUI

本人还是倾向于按需创建的原则,参照demo中预加载的方法,作出了修改,调用方法:

mui.ck_openWindow({  
    title: "窗口标题",  
    name: "窗口id",  
    content: "窗口URL"  
});

以下写在公用文件的js内

(function($) {  
    $.ck_openWindow = function(options) {  
        var defaults = {title: "", name: "", content: ""},  
            settings = $.extend({}, defaults, options);  

        if(!settings.name) {  
            $.alert("创建 窗口失败:name不能为空");  
            return false;  
        }  
        if(!settings.content) {  
            $.alert("创建 窗口失败:没有指定content位置");  
            return false;  
        }  

        //主webview  
        var mainWebview = $.openWindow({  
            id: settings.name + "-main",  
            url: "../layouts/default-template.html",          
            extras:{  
                title: settings.title  
            }  
        });  

        //子webview  
        var subWebview = $.preload({  
            id: settings.name + "-sub",  
            url: settings.content,  
            styles:{  
                top: '45px',  
                bottom: '0px',  
            }         
        });  
        subWebview.addEventListener('loaded', function() {  
            setTimeout(function() {  
                mainWebview.append(subWebview);  
            }, 400);  
        });  
    }  
})(mui);

以下是主webview的html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link rel="stylesheet" href="../css/mui.min.css">  
    <script src="../js/jquery-1.10.2.min.js"></script>  
    <script src="../js/mui.min.js"></script>  
    <script src="../js/app.js"></script>          
    <style type="text/css">  
        .mui-loader {  
            position: absolute;  
            top: 25%;  
            width: 100%;  
            height: 60%;  
            color: #888;  
            font-size: 14px;  
            text-align: center;  
        }  
    </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 id="title" class="mui-title"></h1>  
    </header>  
    <div class="mui-loader">加载中...</div>  
    <script type="text/javascript">  
        mui.plusReady(function(){             
            var self = plus.webview.currentWebview();  
            $("#title").text(self.title);             
        });       
    </script>     
</body>  
</html>
2015-04-30 00:03 负责人:无 分享
已邀请:
枫桥居APP

枫桥居APP

这个封装非常好!但我还有个想法,就是不用每打开一个页面就创建一个webview,这样页面打开多了会越来越卡(特别是低端机器)。
那怎么办呢?
我的思路是:创建2个webview,来回切换。
一开始就创建2个webview,每次点击页面的时候调用共用方法openPage(pagename)然后调取刚才创建的webview,判断哪个是显示的哪个是隐藏的(为了转场需要)。把显示的webview设置为隐藏,把隐藏的设置为显示并且调取内容。这样的好处就是2个webview来回调取性能肯定是杠杠的(相对每个页面都创建webview来说)
我也在研究这个,但我毕竟是做后端的,前端的也不是很熟悉所以目前也遇到些问题(思路肯定没错,只是一些用户体验方面的问题,比如返回按钮、转场动画)
附上我的app http://a.app.qq.com/o/simple.jsp?pkgname=io.dcloud.H510E2B40

  • CKHan (作者)

    譬如以下一个场景:从 我-> 订单列表 -> 订单详细页 -> 物流查询页 依次序打开,然后一步一步返回后退,到退回到订单列表(是滚动异步加载数据的,每次10条记录,已经加载了30条记录,页面肯定有滚动过),利用这种方式,后退的时候,你是如何实现回到页面的原状态呢?

    2015-04-30 10:42

  • 枫桥居APP

    回复 CKHan:这个我也在研究,我是想用store保存url,点击返回的时候读取上一条history,然后读取出来,然后把那条记录删除,至于滚动我想可以不做,如果要做滚动也可以把当前页的url和滚动条位置都保存到store.这个功能如果封装成一个插件的话,调用起来会很方便!思路是这样的

    2015-04-30 13:18

  • 枫桥居APP

    回复 CKHan:js保存记录可以用栈,后进先出,每个元素为一个对象,既可以保存url又可以保存滚动位置或者标题之类的

    2015-04-30 13:22

枫桥居APP

枫桥居APP

你觉得这个想法可行度如何?

stock2

stock2

不错想法,大家在改进效果. 最初登陆时,判断是否打开,否就打开,否则就隐藏. 再注销再次登陆时,就不需要再次打开了. 虽然页面多点.但切换肯定很快.是隐藏和显示.

枫桥居APP

枫桥居APP

两个webview相互切换,贴出我的思路,欢迎大家讨论

var webview;  
var webview1 = plug.webview.getWebviewById(id1);  
var webview2 = plug.webview.getWebviewById(id2);  

//获取一个webview  
if(webview1.isVisible()){  
    //假如webview1可见,那么就选取webview2作为切换页面  
    webview =  webview2;  
    //把webview1设为隐藏  
    webview1.hide();  
}else{  
    webview =  webview1;  
    //把webview2设为隐藏  
    webview2.hide();  
}  

webview.show();  
webbiew.loadUrl(url);//这里用loadUrl会闪屏体验不好,所以这个地方还有优化余地,可以用loadData,大概思路就这样  

.....  
CKHan

CKHan (作者)

@枫桥
你尝试这样调整一下,我现在没得测试:

var webview1 = plug.webview.getWebviewById(id1),  
      webview2 = plug.webview.getWebviewById(id2),  
      source_webview = webview1.isVisible() ? webview1 : webview2,  
      target_webview = webview1.isVisible() ? webview2 : webview1;  

target_webview.loadUrl(url);  
target_webview.addEventListener('loaded', function() {  
     source_webview.hide();  
     target_webview.show();  
});

后退的时候可以尝试用h5的新特性解决:history.pushState

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