Applet custom pull-down refresh (Taro Edition)

When considering implement custom pull-down refresh components, first of all to be clear, this considered a hack program. Not to say how good are the custom, but custom drop-down refresh in androidcase there will be slight Caton (I realize this way). So try or use a small program that comes with it.

This is achieved mainly with reference to Alan Gangster components .

Method to realize

We will page is divided into the following structure

The normal time drop-down refresh region height of 0.

Then we pass scroll-viewthe scrollToUpeperevent to mark the beginning to decline.

By touchstartto record the initial position of our fingers.

By listening to the list of areas of the touchmoveevent, to continuously calculate the distance of finger movement.

touchendEvent to trigger the update event.

Our pages are divided into several states:

enum refreshStatus {
  INIT,
  PULL_DOWN,
  READY_REFRESH,
  LOADING,
  DONE
}
复制代码

Process substantially as follows:

1. After the page is loaded INITstate.

2. When triggered scroll-viewthe scrollToUpeperevent, we recorded a flag isUpper, in scroll-viewthe scrollevent trigger, isUpperdenotedfalse

3. When we list the top of the page and then slip the drop-down, enter the page PULL_DOWNstate. Usually set up an effective drop-down distance call validHeight, when less than the height of the drop-down validHeightwhen you release your finger this time, the page does not refresh the rebound.

4. As we continue to pull down from more than validHeightat this time to enter the READY_REFRESHstate.

5. In the READY_REFRESHopen state when the finger, refresh the page, enter the LOADINGstate.

6. After the page refreshes, enter the DONEstate, becomes a refresh area height0

We also need to set a maximum height of the drop-down, as well as in the READY_REFRESHstate, after the finger is released to the maximum height of rebound refresh region.

At this point we can write touchend, touchstart, touchmovethe code is as follows :( detailed code )

  handleTouchMove(e) {
    const curTouch = e.touches[0]
    const moveY = (curTouch.pageY - this.lastTouchY) * .3
    if(
      !this.isUpper ||
      moveY < 0 || 
      moveY > 2 * this.maxHeight ||
      this.state.refreshStatu === refreshStatus.LOADING
    ) {
      return
    }
    if(moveY < this.validHeight) {
      this.setState({
        refreshHeight: moveY,
        refreshStatu: refreshStatus.PULL_DOWN
      })
    } else {
      this.setState({
        refreshHeight: moveY,
        refreshStatu: refreshStatus.READY_REFRESH
      })
    }
  }
  handleTouchStart(e) {
    const curTouch = e.touches[0]
    this.lastTouchY = curTouch.pageY
  }
  handleTouchEnd() {
    this.lastTouchY = 0
    if(this.state.refreshStatu === refreshStatus.READY_REFRESH) {
      this.setState({
        refreshStatu: refreshStatus.LOADING,
        refreshHeight: this.maxHeight
      })
      if (this.props.onRefresh) {
        this.props.onRefresh()
      }
    } else {
      this.setState({
        refreshHeight: 0
      })
    }
  }
  handleScrollToUpeper() {
    this.isUpper = true
  }
  handleScroll() {
    this.isUpper = false
  }
复制代码

In addition, we also need to add on the page calls the disableScroll: trueconfiguration to solve problems along the entire page ios decline.

Contrast native pull-down refresh

1. There will be a slight Caton, ios and simulator experience better next android.

2. Local pages can pull down to refresh. Refreshing style can also be customized.

Epilogue

In fact, in ioscase there is a way to achieve, is to use iosthe scroll-viewwhile also pulled the top of the previous drop-down (rubber band effect), this time we can refresh region on scroll-viewbut the area above. Certainly better than ever performance computing height is better.

But there are two problems:

1. Page no longer topical, because topical use, then you need to disable page scrolling, which also followed the disabled ios rubber band effect, so that we can not use the drop-down refresh

2. There is a slight rebound effect after the finger is released, although harmless, but still feel very strange.

This implementation also next time I posted, you can refer to Allen's blog , he said, in more detail, I mainly refer to his code to achieve.

Reproduced in: https: //juejin.im/post/5cf488e06fb9a07f0052c53a