打开新页面,在请求数据成功前显示“正在加载”
打开新页面,在请求数据成功前显示“正在加载”
木容木水 发表于6个月前
打开新页面,在请求数据成功前显示“正在加载”
  • 发表于 6个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验(最好的用户体验应该是通过预加载的方式):第一步,B页面loaded事件发生后,不自动显示;

第一步,B页面loaded事件发生后,不自动显示;
mui.openWindow({
url: ‘B.html’,
show:{
autoShow:false
}
});
第二步,在B页面获取列表数据后,再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据;
window.onload = function(){
//从服务器获取数据
….
//业务数据获取完毕,并已插入当前页面DOM;
//注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
}
例如:B 页面首先是使用ajax请求数据。则把 mui.plusReady() 写在请求成功后。

mui.ajax(apiurl + ‘/api/index/lists’, {
dataType: ‘json’, //服务器返回json格式数据
type: ‘post’, //HTTP请求类型
success: function(data) {
console.log(JSON.stringify(data));
itemList.mylist = eval(“(” + JSON.stringify(data.data) + “)”);
mui.plusReady(function() {
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
},
error: function(xhr, type, errorThrown) {
mui.plusReady(function() {
plus.nativeUI.toast(‘服务器连接失败,请稍后再试’);
});
}
});

共有 人打赏支持
粉丝 0
博文 10
码字总数 1914
×
木容木水
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: