微信小程序上拉加载，下拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法

方法1

利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载

设置window中属性enablePullDownRefresh为true

属性	类型	描述
enablePullDownRefresh	Boolean	是否开启下拉刷新，详见页面相关事件处理函数。

设置注册页面中Page中函数

属性	类型	描述
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数

onPullDownRefresh: 下拉刷新说明

监听用户下拉刷新事件。

需要在config的window选项中开启enablePullDownRefresh。

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

4.

代码示例

代码

onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载

wx.request({
url: 'https://URL',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})

方法2

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序

属性	类型	描述
bindscrolltoupper	EventHandle	滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle	滚动到底部/右边，会触发 scrolltolower 事件