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>

• 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, // 滚动条当前的纵坐标
      
    }
  }

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

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

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

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

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!