代码如下所示:
背景:
在plusReady的时候分别创建了webview1和webview2, 其中, webview1是首页的子窗口, webview2是独立窗口. 而在msg.html中, 大概有不到200个li, 每个li包含图文和文字. (跟微信会话列表类似).
设备:
华为荣耀6普通版
步骤:
1, 重启app, 稍等片刻, 等待所有页面的plusReady均执行完成.
- 打开webview1, 然后关闭
- 打开webview2, 然后关闭
- 打开webview1, 然后关闭
- 打开webview2, 然后关闭
现象:
- 明显看到第一次打开webview1的时候, 有一个从左到右的渲染过程.(可能是子窗口打开动画?)
- 第一打开webview2的时候, 几乎没有看到这个渲染过程. 仅仅闪了一下, 很快.
- 第二次打开webview1和webview2的时候, 没有看到渲染过程, 直接显示.
疑问:
- webview模块的父子窗口的具体有什么逻辑关系.
- 在API文档中看, 说子窗口append到父窗口之后, 不能调用child.show(), 而应该调用parent.show(), 但是在hbuilder的基于webview模式的选项卡的例子中, 却又是这样的用法, 这个用法到底对不对? 如果不对, 正确写法应该怎么样的?
这个问题怎么破?? 难道父子页面的鸡肋? 能看不能用?
备注:
如果app启动的时候, 直接显示webview1, 然后在webview1的plusReady回调中执行plus.navigator.closeSplashscreen();关闭splash页面, 也同样看不到从左到右的渲染过程. 但是如果让splash自动关闭的话, 同样能看到该效果?
mui.plusReady(function(){
var viewStyle = {
background: 'transparent',
top: '48px',
bottom: '55px',
bounce: 'vertical',
scrollIndicator : 'vertical',
};
var self = plus.webview.currentWebview();
// 之前担心父窗口show的动画对子窗口有影响, 这里尝试重置一下.
//self.hide('none');
//self.show('none');
var webview1 = plus.webview.create('msg.html','msg1', viewStyle);
var webview2 = plus.webview.create('msg.html','msg2', viewStyle);
webview2.hide();
self.append(webview2);
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == '1') {
webview1.show('none');
}
if (targetTab == '2') {
webview1.hide('none');
}
if (targetTab == '3') {
webview2.show('none');
}
if (targetTab == '4') {
webview2.hide('none');
}
return;
}
}
三枚紫橄榄 (作者)
十分感谢你的回答.
但是, 我比较关注的是, 首次打开webview1的时候, 那个明显的从左到右的渲染的过程怎么破. 从webview2的情况来看, 应该不是设备性能的问题.
2015-05-05 09:45
DCloud_UNI_CHB
5+ runtime团队正在解决;
2015-05-06 22:07