小程序下拉刷新,上拉加载更多
2019-01-16 本文已影响0人
海珊瑚123
小程序上拉加载:onReachBottom
小程序下拉刷新:onPullDownRefresh
json里面需要设置 "enablePullDownRefresh": true,
1.设置第几页page,设置每页的数量limit
2.设置一个空数组contentList存放每次请求的数据,存储方式contentList.concat(res),当为第一页的时候contentList设为空。
当请求的数量的长度大于等于每页的数量时,page+1,当小于每页的数量时,代表已经没有更多数据了,page的值不变。
page({
data:{
page:1, //第几页
limit:10, //每页的数量
orderList:'' //列表数据
},
orderList:function(){
let that = this;
//这里省略请求,假设请求成功每次请求的数据为 res,在success中做如下操作
let contentList = that.data.orderList;
if(that.data.page == 1){
//第一页的时候直接赋值,contentList 为空避免数据重复
contentList = [];
that.setData({
orderList:res
})
}
if(res.length < that.data.limit){
that.setData({
orderList:contentList.concat(res),
hasMoreData:false, //没有数据了
})
}else{
that.setData({
that.setData({
orderList:contentList.concat(res),
hasMoreData:true, //还有数据
page:that.data.page + 1
})
})
}
},
// 上拉加载数据
onReachBottom: function () {
if (this.data.hasMoreData) {
this.orderList()
} else {
wx.showToast({
title: '没有更多数据',
})
}
},
// 下拉刷新数据
onPullDownRefresh: function (res) {
this.data.page = 1
this.orderList()
setTimeout(function () { //这里是防止下拉的回不去,回去效果卡顿
wx.stopPullDownRefresh()
}, 1000)
},
})