In einem Artikel wird ausführlich erläutert, wie vue2 die Pull-Down-Ladefunktion mit Dämpfung implementiert

Dieser Artikel vermittelt Ihnen relevantes Wissen über die Funktion des gedämpften Pulldowns in vue2. Ich hoffe, dass es für Sie hilfreich ist ist hilfreich.

In Vue müssen die ausgelösten Ereignisse gebunden werden.

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

Bewegen auf dem Bildschirm

• Touchend: Wenn der Finger den Bildschirm verlässt

• Wie aus paddingTop hervorgeht, erreichen wir den Drop-Down-Effekt, indem wir die Polsterung am oberen Rand des Containerabstands steuern. Unsere Neuanpassung besteht also darin, den Wert von chatScrollTop über die drei oben genannten Rückruffunktionen zu bestimmen.
  Sie können am Namen chatScoollTop erkennen, dass unsere Pulldown-Aktualisierung im Chatbox-Container verwendet wird.
• Wir müssen diese Variablen verwenden:

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

  Die drei Rückruffunktionen entsprechen drei Stufen, und unser Kerncode ist es auch In drei Teile unterteilt:

Teil 1: Initialisieren Sie den Abstand zum oberen Rand des aktuellen Containers, initialisieren Sie, ob er sich derzeit in einem gleitenden Zustand befindet, und ermitteln Sie die Ordinate der aktuellen Bildlaufleiste.

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

Teil 2: Bestimmen Sie den Abstand zwischen dem Behälter und der Oberseite anhand der Ordinatendifferenz zwischen dem aktuellen Abstand des aktuellen Fingers und dem Moment, in dem er den Bildschirm berührt. Da es aber nicht ständig gleiten kann, entsteht eine Atmosphäre von 0 -> 80. Um das Gleiten interessanter zu machen, wird ein Schrittwert hinzugefügt, um das Gleitdistanzverhältnis anzupassen. Das sogenannte Distanzverhältnis bedeutet, dass die Distanz, die die Fähigkeit zum Gleiten zurücklegt, umso kürzer ist, je weiter der Finger vom Anfang entfernt ist. Erzielen Sie einen dämpfungsähnlichen Effekt.

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
  }
}

Teil 3: Nachdem Sie Ihren Finger losgelassen haben, geben Sie einen Abstand von oben ein, um eine Lade-Bildlaufleiste hinzuzufügen.

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

Empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonIn einem Artikel wird ausführlich erläutert, wie vue2 die Pull-Down-Ladefunktion mit Dämpfung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!