An article explains in detail how vue2 implements the pull-down loading function with damping

This article brings you relevant knowledge about vue2. It mainly talks about how the function of damped pull-down loading is implemented in vue2. Interested friends, let’s take a look. I hope everyone has to help.

In vue, you need to bind the triggered event

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + &#39;px&#39;}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

The code snippet uses three callback functions:

• touchstart: The moment when the finger touches the screen

• touchmove: The moment when the finger moves on the screen

• touchend: The finger When leaving the screen

As you can see from paddingTop, we achieve the drop-down effect by controlling the padding at the top of the container distance. So our re-adjustment is to determine the value of chatScrollTop through the three callback functions above.

You can know from the name chatScrollTop that our pull-down refresh is used in the chat box container.

We need to use these variables:

data() {
  return {
    chatScroollTop: 0, // 容器距离顶部的距离 
    isMove: false, // 是否处于touchmove状态
    startY: 0, // 当前手指在屏幕中的y轴值
    pageScrollTop: 0, // 滚动条当前的纵坐标
    
  }
}

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

The first part: initialize the distance from the top of the current container, and initialize whether it is currently in a sliding state, and obtain the ordinate of the current scroll bar .

touchStart(e) {
  // e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
  this.startY = e.targetTouches[0].pageY
  // 开启下拉刷新状态
  this.isMove = false
  this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}

Part 2: Determine the distance between the container and the top based on the ordinate difference between the current finger's current distance and the moment it touches the screen. But since it can't slide all the time, it gives a 0 -> 80 atmosphere. In order to make sliding more interesting, a step value is added to adjust the sliding distance ratio. The so-called distance ratio means that the farther the finger is from the beginning, the shorter the distance the capacity will follow to slide. Achieve a damping-like effect.

touchMove(e) {
  // 这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
  // 获取移动的距离
  let diff = e.targetTouches[0].pageY - this.startY
  let step = 60
  if (diff > 0 && diff < 80 && this.pageScrollTop === 0) {
     step++ // 越来越大
     this.chatScroollTop += (diff / (step * 0.1)) // 越向下给人的阻力感越大
     this.isMove = true
  }
}

Part 3: After releasing your finger, give a distance from the top to add a loading scroll bar.

  touchEnd() {
    if(this.isMove) {
      this.chatScroollTop = 40
      this.downCallback() // api拉取数据
    }
  }
  async downCallback() {
    try {
       // 拿数据 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

Recommended learning: "vue.js video tutorial"

The above is the detailed content of An article explains in detail how vue2 implements the pull-down loading function with damping. For more information, please follow other related articles on the PHP Chinese website!