【微信小程序】上拉刷新和下拉加载

上拉刷新和下拉加载有两种方式可以实现：

1.使用scroll-view组件进行操作，使用自带的scrolltoupper和scrolltolower事件可以实现。适合页面局部的上拉下拉。

附上文档：

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html   

2.使用page页面事件处理函数 onPullDownRefresh() 下拉刷新 和 onReachBottom()上拉触底事件 可以进行数据上拉刷新和下拉加载的效果。但是注意，此为页面的上拉和下拉，并不适合局部，所以文档也写了跟scroll-view组件不能兼容在一个页面操作处理。

附上文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#pageonpulldownrefresh  

ps：两种版本的文档看着真的别扭。

onPullDownRefresh()

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  onPullDownRefresh: function() {
    wx.stopPullDownRefresh();
    //数据刷新加载操作
  },

onReachBottom()

监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

  onReachBottom: function() {
    if (!lock && !finish) {
      lock = true ;//锁定加载操作，避免多次重复加载
      page = page + 1;
     //页面加载loading显示
     //数据加载操作
    }
  },