vue2 implements the function of loading with damped pull-down

In vue, you need to bind to trigger events

<div
  
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + 'px'}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

The code snippet uses three callback functions:

• touchstart:The moment your finger touches the screen
• touchmove:When your fingers move on the screen
• touchend:When your fingers leave the screen

frompaddingTopIt can be seen that we control the top of the container distancepaddingto achieve the pull-down effect. So our re-tuning is determined through the above three callback functionschatScroollTopvalue.

By naming chatScroollTop, we can know that our drop-down refresh is used in the chat box container.

Variables to use

We need to use these variables:

data() {
  return {
    chatScroollTop: 0, // The distance from the top of the container    isMove: false, // Is it in touchmove state    startY: 0, // The y-axis value of the current finger in the screen    pageScrollTop: 0, // The current vertical coordinate of the scroll bar  }
}

The three callback functions correspond to three stages, and our core code is also divided into three parts:

Part 1: Initialize the distance from the current container to the top, and initialize whether it is currently in a sliding state, and get the vertical coordinate of the current scroll bar.

touchStart(e) {
  // e represents the event object. [0].pageY can get the y-axis point pressed by the finger.   = [0].pageY
  // Turn on the pull-down refresh state   = false
   =  && 
}

Part 2: Determine the distance between the container and the top based on the vertical coordinate difference of the current distance of the current finger when touching the screen. But since it cannot slide all the time, I gave a0 -> 80The atmosphere. To make the slide more interesting, astepThe step value adjusts the sliding distance ratio. The so-called distance ratio means that the further the distance from the finger at the beginning, the shorter the capacity will be as sliding. Achieving a damping-like effect.

touchMove(e) {
  // This touchMove will happen as long as the page is moving, so touching works  // Get the distance to move  let diff = [0].pageY - 
  let step = 60
  if (diff > 0 && diff < 80 &&  === 0) {
     step++ // Getting bigger      += (diff / (step * 0.1)) // The more you go down, the greater the resistance you give      = true
  }
}

Part 3: After the finger is released, give a distance from the top to add a load scroll bar.

  touchEnd() {
    if() {
       = 40
      () // Api pulls data    }
  }
  async downCallback() {
    try {
       // Get data    } catch() {} 
    finall{
       = 0
    }
  }

The above is the detailed content of vue2's function to implement damped pull-down loading. For more information about vue2's function to load damped pull-down, please pay attention to my other related articles!