微信小程序上拉加载下拉刷新
//定义两个全局变量来控制页数和是否刷新
var current = 1;
var loadEnd = false;
首先定义loadNewData方法获取网络参数。
JS代码如下:
loadNewData(page) {
console.log(page)
wx.showLoading({
title: '加载中...'
})
wx.request({
url: '这里是你的网络接口',
method: "POST",
data: {
page: page,
pageSize: 8 //此处的8控制每页显示多少条数据
},
success: (res) => {
wx.hideLoading()
wx.stopPullDownRefresh()
if (res.data.data.length < 8) {
loadEnd = true;
}
let oldList = this.data.data;
let newList = oldList.concat(res.data.data)
this.setData({
data : newList
})
console.log(this.data.data)
}
})
},
写好后就可以在上拉加载下拉刷新方法中调用loadNewData()此方法。
JS代码如下:
onPullDownRefresh: function () {
this.setData({
data: []
})
loadEnd = false
this.loadNewData(1)
},
onReachBottom: function () {
if (!loadEnd) {
this.loadNewData(((this.data.data.length / 8) + 1))
}
},
这样上拉加载下拉刷新就做好啦!