Although the WeChat applet comes with it. onPullDownRefresh Events can listen for a user's drop-down actions and drop-down refresh lists in callback functions.Sometimes, however, due to page layout, the list data we display on a page is not laid out directly on the whole page, but rather placed in a component like scroll-view.

So how do I do a drop-down refresh in such a component?

The bindscrolltoupper event comes with the scroll-view component and is triggered when the scrollbar scrolls to the top/left.But this event is far from enough because we also need to monitor how far the user is sliding and refresh the page as soon as the user releases his finger.

For this reason, we can consider using js native touchstart, touchend, touchmove events.

Define these three events in scroll-view

<scroll-view scroll-y style="height:100%" 
  bindtouchstart='touchStart'
  bindtouchend='touchEnd'
  bindtouchmove='touchMove'>
</scroll-view>
  

To get the state that users touch, we need to define two data in the data.

  data: {
    freshStatus: 'more', // Current refresh status
    showRefresh: false   // Whether to display drop-down refresh components
  }

Based on these two data values, we can write a drop-down refresh component, and the following code needs to be placed in scroll-view

<view wx:if="{{showRefresh}}" style='width:100%;position:relative;padding:60rpx 0;'>
    <view class="text-gray" style='position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);'>
      <view wx:if="{{freshStatus == 'fresh'}}" class="flex">
        <view class="lzy-loading"></view>
        <view>Refreshing...</view>
      </view>
      <view class="text" wx:elif="{{freshStatus == 'more'}}">
        <!-- Used colorUI Drop-down Arrow Icon -->
        <text class="cuIcon-refresharrow"></text> Continue drop-down refresh
      </view>
      <view class="text" wx:else>
        //Release refresh
      </view>
    </view>
  </view>

First, showRefresh, which is Boolean data, shows such a component when the user drops down a certain distance.Then is the freshStatus status value, which shows "Continue Drop Refresh" when the user drops down to a distance that meets the refresh criteria (value of'more'); when the user drops down to a distance that meets the refresh criteria, freshStatus takes a value of'end', the component displays "Release Refresh"; when the user releases his finger, it displays "Refresh in progress", and then invokes it in event handlingFunction to get the latest data and hide the component by setting showRefresh to false when the data is refreshed.

The following is event handling

// Touch Start
    touchStart(e) {
      this.setData({
        startY: e.changedTouches[0].pageY,
        freshStatus: 'more'
      })
    },
    // Touch Move
    touchMove(e) {
      let endY = e.changedTouches[0].pageY;
      let startY = this.data.startY;
      let dis = endY - startY;
      // Determine whether to drop down
      if (dis <= 0) {
        return;
      }
      let offsetTop = e.currentTarget.offsetTop;
      if (dis > 20) {
        this.setData({
          showRefresh: true
        }, () => {
          if (dis > 50) {
            this.setData({
              freshStatus: 'end'
            })
          } else {
            this.setData({
              freshStatus: 'more'
            })
          }
        })
      } else {
        this.setData({
          showRefresh: false
        })
      }
    },
    // Touch End
    touchEnd(e) {
      if (this.data.freshStatus == 'end') {
        // Delay 500 milliseconds to display Refresh to prevent requests from being displayed too quickly
        setTimeout(()=>{
            this.getList(); // Get the latest list data
        }, 500);
      } else {
        this.setData({
          showRefresh: false
        })
      }
    },

There are also wxss related

.lzy-loading{
  margin-right: 20rpx;
  float: left;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  border-left: 1px solid #6190E8;
  animation: load 1s linear infinite;
  -webkit-animation: load 1s linear infinite;
}
@-webkit-keyframes load
{
  from{-webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}
@keyframes load
{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}