实现原理:
1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。
2、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。
下拉刷新:首先在我们要使用下拉刷新页面的json配置中写入
"enablePullDownRefresh":true, // 开启下拉刷新
"backgroundTextStyle":"dark" // 改变刷新时出现的样式,默认是白色。
然后在我们的开启下拉刷新的页面就可以下拉了。
onPullDownRefresh:function(){ // onPullDownRefresh 专门用来监听用户的下拉动作
wx.request({ // 用户下拉后我们重新请求一次
url:'https://wwwaksdha',
data:{pagenum:1,pagesize:10},// 发送的参数 请求第一页的数据 每页10条数据
method:'get', // 请求方式
success(res){
this.setData({
list:res.data.list // 我们重新赋值,让他渲染页面
})
}
})
}
上拉加载更多:
首先我们要知道一个小程序的内置函数,页面上拉触底事件的处理函数 onReachBottom
page({
data:{
pagenum:1,
pagesize:10,
list:[]
},
onReachBottom: function () { // 当我们滚动条到底触发的函数
let oneself = this; // 因为下边在一个函数中,他的this指向是改变的。
wx.request({ // 重新发送请求
url:'https://ashdkas', // 请求路径
data:{pagenum:this.data.pagenum,pagesize:this.pagesize}, // 请求参数 pagenum是当前页
method:'get', // 请求方式
success(res){ // 成功回调
oneself.setData({ // 修改数据
list:[...oneself.data.list,...res.data.list] // 我们让当前的数据和请求来的数据合并成一个数组
// 我用到的是展开运算符,大概意思就是 把数组中的每一个元素都展开。
});
}
})
},
})