小程序中的下拉刷新上拉加载
下拉刷新
在需要下拉刷新的页面中找到json：
配置下拉刷新开启按钮：
"enablePullDownRefresh": true
在该文件的js 文件配置相关内容：
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
pagenum: 1 //当前页码
})
this.getDetail(this.data.obj) //重新渲染数据
},
上拉加载
在需要上拉加载的页面中找到js :
配置相关内容：
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
pagenum: this.data.pagenum + 1 //当页面超出每页的个数，使页面+1
})
this.getDetail(this.data.obj)//重新渲染数据
},
微信小程序下拉刷新上拉加载------小例子
页面的初始数据
/**
* 页面的初始数据
*/
data: {
obj: '',
catDetail: [],
pagenum: 1,
pagesize: 10,
},
调用相关数据
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options);
this.setData({
obj: options
})
this.getDetail(options)
},
getDetail(obj) {
// console.log(obj);
// https://api-hmugo-web.itheima.net/api/public/v1/goods/search
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
data: {
query: '',
cid: obj.cid,
pagenum: this.data.pagenum,
pagesize: 10
},
success: (res) => {
// console.log(res);
console.log(res.data.message.goods);
if (this.data.pagenum == 1) {
//若数据较少，一页可展现全部时
this.setData({
catDetail: res.data.message.goods
})
} else {
//若数据较多，需多页展现全部时
let ss = [...this.data.catDetail, ...res.data.message.goods]
this.setData({
catDetail: ss
})
}
}
})
},
上拉刷新上拉加载逻辑
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
pagenum: 1
})
this.getDetail(this.data.obj)
console.log(99);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log(222);
this.setData({
pagenum: this.data.pagenum + 1
})
this.getDetail(this.data.obj)
},