大家好,又见面了,我是你们的朋友全栈君。
在写一个页面的刷新效果, 需求是在页面第一次进来时,做出一次数据加载,之后在页面有个评论操作,每次评论成功都将本页的数据进行刷新。
考虑到如果刷新都用onLoad()的话,会造成比较大的资源浪费,所以,把需要进行数据刷新的部分放到onShow页面进行刷新。
因为我的函数在加载评论数据的时候,需要一个bookid数值,传参到服务器这样才能获取相对应的数据。但是bookid是从上个页面通过options传参过来的,而这个参数到onLoad()为止就结束了,无法再其他的地方使用。但是在页面刚进行加载的时候,data中的数据是没有的,也就是说不能通过onLoad()将 data中的数据进行更新,然后在onShow()中进行调用。
这就造成了本页面中onLoad()与onShow()之间无法进行一个有效时间内的数据交流。
所以我想了个比较偷鸡的方法。
直接上代码:
onLoad:function(options){
console.log("onload加载刷新");
var that = this;
wx.request({
url: 'https://www.*******.cn/BookStoreProject/public/store.php/getInformation',
data: { isUser : 0 , bookid : options.bookid},
method: 'GET',
header: { "content-type": "application/json" },
success: function (res) {
console.log(res.data[0]);
var bookurl1 ='imgUrls['+ 0 +']';
var bookurl2 = 'imgUrls[' + 1 + ']';
var bookurl3 = 'imgUrls[' + 2 + ']';
that.setData({
bookmsg: res.data[0],
[bookurl1]: res.data[0].pic1_url,
[bookurl2]: res.data[0].pic2_url,
[bookurl3]: res.data[0].pic3_url,
});
console.log("获取数据成功")
},
fail: function (res) {
console.log("获取数据失败!");
},
complete: function () {
// complete
}
});
that.onShow(options.bookid);
}
函数内容可以不必理会,只要看最后一句加了that.onShow(options.bookid);
将onLoad接受到的数据传递到了onShow中。
同样的,onShow函数如下需要接收这个数据:
onShow: function (bookid){
var that = this;
// 获取评论,用来刷新,第一次页面初始加载时无法得到执行结果
wx.request({
url: 'https://www.***********.cn/BookStoreProject/public/store.php/showComment',
data: { isUser: 0, bookid: bookid },
method: 'GET',
header: { "content-type": "application/json" },
success: function (res) {
const temp = res.data;
for (var i = 0; i < res.data.length; i++) {
temp[i].comtime = time.formatTimeTwo(temp[i].comtime, "Y/M/D h:m:s");
}
temp.reverse();//评论逆序输出
that.setData({
comments: temp,
});
}
});
}
可以看到再request请求中,参数bookid被使用到。
从原理上来讲。页面刚进入的时候,执行onLoad,在onLoad中调用onShow。这个时候页面数据被加载好。然后页面正常调用onShow,此时因为没有参数,所以此次onShow会无法得到有效的结果。我将这次的onShow叫做无效加载。
之后每次需要刷新数据的时候,只需要直接调用onShow就可以了。
我突然发现犯了个傻吊的错误,onShow里面的内容可以直接重新写一个函数封装起来啊,然后直接在onLoad里面调用,之后刷新也直接调用就好了。为什么要多次一举写在onShow里面呢???哭辽。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149411.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...