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

小程序中实现上拉加载和下拉刷新的方法有两种:

1. 调用小程序上拉加载和下拉刷新的api
2. 通过监听 scroll-view 滑动到顶部和滑动到底部

注意：官方文档给出了第一种方法的局限性

tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

下面来介绍一下两种方法的实现

第一种方法(调用小程序上拉加载和下拉刷新的api)

(1) 在页面或者全局的xxx.json文件中开启下拉刷新和页面上拉触底事件触发时距页面底部距离，单位px

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 10px,
  "backgroundColor": "#F87A5F",
}

(2) 在js中监听用户下拉动作

Page({
  onPullDownRefresh(){
    wx.showNavigationBarLoading()   //在当前页面显示导航条加载动画
    this.getData()   //请求数据
  },
  onReachBottom(){
    wx.showNavigationBarLoading()   //在当前页面显示导航条加载动画
    this.getData()   //请求数据
  }
})

第二种方法(通过监听 scroll-view 滑动到顶部和滑动到底部)

(1) wxml中
在scroll-view中添加bindscrolltoupper和bindscrolltolower事件

    正在刷新...
    
      {{item}}
    
    正在加载...
    --- 我是有底线的 ---

(2) js中
添加wxml中的同名函数

Page({
  refreshData(){
    wx.showNavigationBarLoading();   //在当前页面显示导航条加载动画
    this.setData({refreshing: true});
    console.log('下拉刷新');
    this.getData();
  },
  loadMoreData(){
    wx.showNavigationBarLoading();   //在当前页面显示导航条加载动画
    this.setData({loadingMore: true});
    console.log('上拉加载');
    this.getData();   ///请求数据
  }
})