微信小程序实现下拉刷新怎么实现数据的追加
1.思路
在微信小程序中提供了下拉刷新的api（onPullDownRefresh()）,那么实现下拉刷新的业务就是再下拉的时候，在原有的数据中追加新的数据
2.代码实现
2.1 坑一
onPullDownRefresh: function () {
var _this =this;
/**显示loading */
wx.showNavigationBarLoading();
_this.newsrequest(_this.data.page);
wx.stopPullDownRefresh();
wx.hideNavigationBarLoading();
// console.log(_this.data.newslists)
},
/**请求数据 */
newsrequest:function(page){
var _this=this;
// console.log(_this.data.page)
requstFfunc.requestData('https://xxxx/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
var result = _this.newsdatadecorate(data.data.data.list);
console.log(page)
console.log(result)
var arr=_this.data.newslists;
if (result.length>0){
/*此时会发现数据被添加到原有数据的后边类似上拉加载更多*/
_this.setData({
newslists: _this.data.newslists.concat(result)
});
_this.data.page++;
}
})
},我们知道数组的concat方法时讲参数数组拼接到原有数据后边，所以与我们想要的追加在前面不想符合，想想该数组前面追加的方法时unshift()更改代码：
2.2坑二
有人说concat方法时在数据后边追加，那么只要再使用数组反转reverse()将数组反转，仔细想想，这种数据不是我们想要的下拉刷新的
var arr1 = [1,2,3,4];//原来的数据
var arr2 = [5,6,7,8];//后来的数据
var arr3 = arr1.concat(arr2);//[1,2,3,4,5,6,7,8];
var arr4 = arr3.reverse();//[8,7,6,5,4,3,2,1]
//但是我们想要的应该是
var arr5 =[5,6,7,8,1,2,3,4]newsrequest:function(page){
var _this=this;
// console.log(_this.data.page)
requstFfunc.requestData('https://xxxx/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
var result = _this.newsdatadecorate(data.data.data.list);
console.log(page)
console.log(result)
var arr=_this.data.newslists;
if (result.length>0){
_this.setData({
newslists: _this.data.newslists.concat(result).reverse()
})
_this.data.page++;
}
})
},2.2坑三
newsrequest:function(page){
var _this=this;
// console.log(_this.data.page)
requstFfunc.requestData('https://xxxx/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
var result = _this.newsdatadecorate(data.data.data.list);
console.log(page)
console.log(result)
var arr=_this.data.newslists;
if (result.length>0){
for(var t in result){
_this.data.newslists.unshift(result[t])
}
_this.data.page++;
}
})
},但是页面的数据不显示，具体原因不详，应该是this.data.方法设置数据，应该和页面的生命周期有关，在数据设置时，页面已渲染,（自己想想的，不知道对不对）
这是我们就可以通过中介，将数据拼接好了之后，再通过this.setData()方法设置数据，这时就可以正常显示
newsrequest:function(page){
var _this=this;
// console.log(_this.data.page)
requstFfunc.requestData('https://xxxx/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
var result = _this.newsdatadecorate(data.data.data.list);
var arr=_this.data.newslists;
if (result.length>0){
for(var v in result){
arr.unshift(result[v])
};
_this.setData({
newslists:arr
});
_this.data.page++;
}
})
},上述方案虽然成功了实现了数据追加，但是。。。且看下边代码
var arr1 = [1,2,3,4];//原来的数据
var arr2 = [5,6,7,8];//后来的数据
var arr3 = arr2.concat(arr1);//[5,6,7,8,1,2,3,4];
//但是我们想要的应该是
var arr5 =[5,6,7,8,1,2,3,4]
//此时两个数据是不是一致的呢newsrequest:function(page){
var _this=this;
// console.log(_this.data.page)
requstFfunc.requestData('https://xxxx/Public/Api/index.php', { service: 'Default.Archives', typeid: '44', orderby: '4', page:page, pagesize: '10' }).then(function (data) {
var result = _this.newsdatadecorate(data.data.data.list);
console.log(page)
console.log(result)
var arr=_this.data.newslists;
if (result.length>0){
_this.setData({
newslists: result.concat(_this.data.newslists)
});
_this.data.page++;
}
})
},本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.08.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
