先简单说下页面流:首页(列表)、详情页面。
首页加载时,已经预加载了详情页面。监听列表的tap事件,一触发及通过mui.fire通知详情页面ajax加载数据并渲染,然后mui.openWindow打开新窗口。出现以下问题:流畅的切换到详情页面,这时页面才会渲染一下(执行我ajax成功回调中的方法),而不是显示已经渲染好的页面。就算我使用等待框或者setTimeout也解决不了这个问题。所以我想是否是我渲染数据的代码出了问题,请指教。下面贴上代码。
不必在意setTimeout的方法,这里是为了优化pop-in的效果。50ms的延迟和这个问题没有关系。
列表监听事件:
// 主列表点击事件
mui('#list').on('tap', 'a', function() {
//plus.nativeUI.showWaiting("正在加载...");
var page = plus.webview.getWebviewById("ratedetail.html");
var objId = this.getAttribute('data-id');
var id = this.getAttribute('href');
var href = this.getAttribute('href');
// 通知详情页面去ajax拉取数据(在渲染页面和移动窗体之前)
mui.fire(page,'pulldata',{id:objId});
// 延迟50毫秒显示窗体。解决被tap元素高亮效果不消失的问题。
// 另:为了传参将延迟函数写成该形式:setTimeout(function(){yourFuction(params)},time)
setTimeout(function(){openNew(objId,id,href)},50);
});
function openNew(objId,id,href){
var page = mui.openWindow({
id: id,
url: href,
createNew:false,
show: {
aniShow: 'pop-in'
},
});
}
详情页面(这里只贴上ajax渲染数据部分):
// 成功回调,渲染数据
var onSuccess = function (data) {
console.log(JSON.stringify(data));
var depa = document.getElementById("depa");
depa.innerText = data.obj.depa;
var dest = document.getElementById("dest");
dest.innerText = data.obj.dest;
var airline = document.getElementById("airline");
airline.innerText = data.obj.airline;
var week = document.getElementById("week");
week.innerText = data.obj.week;
var cargoType = document.getElementById("cargoType");
cargoType.innerText = data.obj.cargoType;
var currency = document.getElementById("currency");
currency.innerText = data.obj.currency;
var duration = document.getElementById("duration");
duration.innerText = data.obj.duration;
};
2015.12.30更新
如果没有解决方案的话,是否能判断dom何时渲染完毕,再关闭等待框。现在的问题在于连这点也无法实现。
2015.12.31更新
使用pop-in会采用切换前后页面的截图,这个效果的造成是因为ajax是直译式语言,虽然将show出新窗体的代码写在渲染代码之后,但是渲染的效率根据手机的性能不同而不同。所以我的解决方案是,渲染完毕后用定时器延迟50ms,此时再show新窗口就可以了。然后show新窗口直接在新窗口的js代码里写就ok。感谢@maq的积极响应。
Eason (作者)
pop-in毕竟体验好,还能解决返回字体模糊的问题。在哪里show()没有太大区别,然后目前定时器延时是一定要的,因为javascript是直译式语言,虽然show()写在渲染数据的代码后,但未必已经渲染好了。除非监听dom已经加载完毕的事件,里面写show()这样能做到0延迟。
2015-12-30 17:17
maq
根据目前推演的情况来看,如果一定要用 pop-in 的话,就只能等官方来确认并修复 BUG 了。
应该有两个方面需要修复,一个是 pop-in 不要强制采用 capture 方式实现动画过程,要允许 show 的过程中实时渲染。另一个是 capture 之前要给 webview 一次 repaint 的机会,避免获取到过时的页面截图。
2015-12-30 18:02