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

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

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事件

<scroll-view class="my-list" scroll-y="true" bindscrolltoupper="refreshData" bindscrolltolower="loadMoreData">
    <view  class='refreshData' wx:if="{{refreshing}}">正在刷新...</view>
    <view class="my-list-item" wx:for="{{tomatoes}}"  wx:for-index="key" wx:key="index">
      <text>{{item}}</text>
    </view>
    <view  class='loadingData' wx:if="{{loadingMore}}">正在加载...</view>
    <view  class='tipMessage'>--- 我是有底线的 ---</view>
</scroll-view>

(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();   ///请求数据
  }
})