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

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

方法1

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

设置window中属性enablePullDownRefresh为true

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

设置注册页面中Page中函数

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

onPullDownRefresh: 下拉刷新说明

1. 监听用户下拉刷新事件。
2. 需要在config的window选项中开启enablePullDownRefresh。
3. 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
4. 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 事件