DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-11-24 22:02
  • 更新:2021-04-01 09:20
  • 阅读:86670

hello mui中的无等待窗体切换是如何实现的

分类:MUI

从mui v0.7.0版本开始,hello mui示例App的窗体切换性能大幅提升,点击一个链接,不显示雪花等待框,立即打开一个“正在加载...”的页面,之后真实内容快速填充“正在加载...”区域;本文详细讲解如何实现这种窗体切换效果。
整体思路:
1、预加载一个模板父页面(template.html)和共用子页面;
2、点击列表链接时,直接显示模板父页面,并动态修改模板父页面的标题;
3、共用子页面通过loadURL方法加载对应目标页面;

步骤分解:
list.html页面中预加载模板父页面和共用子页面,为了提高效率,共用子页面默认加载了主列表中的第一项(accordion.html),代码如下:

//预加载模板父页面  
var template = mui.preload({  
    url:'examples/template.html',  
    id:'demoTemplate',  
    styles:{  
        popGesture:"hide"  
    }  
});  
//预加载共用子页面  
var subWebview = mui.preload({  
    url:'examples/accordion.html',  
    id:'template_sub',  
    styles:{  
        top: '48px',  
        bottom: '0px'  
    }  
});

点击列表项时,立即显示模板父页面,改变模板父页面标题,共用子页面加载对应的目标页面,代码如下:

var title = this.innerText;  
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");  
if(subWebview.getURL()==this.href){  
    subWebview.show();  
}else{  
    subWebview.loadURL(this.href);  
}  
template.show('slide-in-right', 150);

共用子页面默认隐藏,等加载新内容完毕后,再显示出来,代码如下:

subWebview.addEventListener('loaded', function() {  
    setTimeout(function(){  
        subWebview.show();    
    },50);  
});

新页面按下返回按钮后,隐藏模板父页面,并在窗体动画结束后,隐藏共用子页面,代码(App.js)如下:

getTemplateWebview().hide('auto');  
setTimeout(function() {  
    document.getElementById("title").className = 'mui-title mui-fadeout';  
    getSubWebview().hide("none");  
}, 200);

如上方案的优点:
1、模板父页面预加载,点击后立即显示,不用展示雪花等待框,也不会出现白屏现象;
2、共用子页面,有效控制webview数量,避免切页时频繁创建、销毁webview;

52 关注 分享
半杯可乐 潘歌 感受呼吸 saint宝宝 达达x 小帆 仙人指路 leolong 老张放羊 一瓢哥会狮吼功 efeiwork 随风如下 asdfasdf23r blj 好冷 老万 jijinduoduo Back 言和 猫的哈 wenxy Mrlcq 341348 xiamo152 wenju johnson_liu BobLau 水域心诚 RyanHooper Trust 2***@qq.com w***@163.com 雪之梦技术驿站 gaohuazi 小新的狗叫小白 7***@qq.com e***@126.com abiu 1***@qq.com j***@163.com MR不靠谱 gitfengyuzhang 最光阴 那年暑假 fx4399 bonly 1***@qq.com 9***@qq.com 风刀霜剑 2***@qq.com

要回复文章请先登录注册

4***@qq.com

4***@qq.com

mark
2021-04-01 09:20
1525941857QQ

1525941857QQ

mark
2018-11-21 10:06
j***@163.com

j***@163.com

mark
2017-12-12 22:17
1***@qq.com

1***@qq.com

mark
2017-05-31 23:36
1***@qq.com

1***@qq.com

mark
2017-03-16 20:40
7***@qq.com

7***@qq.com

mark
2016-12-29 22:21
1***@qq.com

1***@qq.com

mark
2016-08-20 18:29
l***@qq.com

l***@qq.com

回复 l***@qq.com :
还有,页面可以用a标签的href跳转,跳转打开页面的速度比openWindow快很多,这个和loadURL有关吗
2016-07-31 01:38
l***@qq.com

l***@qq.com

loadURL能否触发新页面的loaded以及plusReady等事件?
2016-07-31 01:37
Trust

Trust

回复 云落 :
在HBuilder,项目管理器部分,新建-移动app-Hello mui示例。
2016-07-30 12:47