So erkennen Sie einen Gleitstopp in Vue

In der Front-End-Entwicklung nimmt der Nutzungstrend mobiler Seiten zu. Gleichzeitig unterscheidet sich auch die Bedienungsmethode des mobilen Terminals von der des PC-Terminals. Das Gleiten wird nicht nur beim Surfen im Internet verwendet, sondern auch häufig in verschiedenen Anwendungen, z. B. beim Lesen von Nachrichten, beim Durchsuchen von Produkten, beim Ansehen von Videos usw. Daher ist die effektive Erkennung von Gleitstopps zu einem Problem geworden, das viele Front-End-Ingenieure benötigen zu lösen.

Vue ist heutzutage eines der beliebtesten Frontend-Frameworks und immer mehr Entwickler nutzen Vue für die mobile Entwicklung. In diesem Artikel wird erläutert, wie Sie mit Vue einen Gleitstopp erkennen.

1. Einführung in Sliding-Ereignisse

In der mobilen Entwicklung verwenden wir hauptsächlich zwei Ereignisse, um Sliding zu erkennen: Touchstart und Touchmove. Wenn der Finger den Bildschirm berührt, wird das Touchstart-Ereignis ausgelöst; wenn der Finger über den Bildschirm gleitet, wird das Touchmove-Ereignis ausgelöst. Wir können die Gleitrichtung und den Abstand ermitteln, indem wir diese beiden Ereignisse abhören, die Koordinateninformationen des Fingers auf dem Bildschirm abrufen und dann den Bewegungsabstand des Fingers berechnen.

2. Erkennungsmethode für Gleitstopps

In Vue können wir benutzerdefinierte Anweisungen verwenden, um auf Gleitereignisse zu warten. Benutzerdefinierte Direktiven sind eine sehr nützliche Funktion in Vue, mit der sich Ereignisse und Attribute einfach direkt an DOM-Elemente binden lassen.

Das Folgende ist ein einfaches Beispiel. Wir können einem Element eine V-Touchend-Anweisung hinzufügen. Diese Anweisung wird ausgelöst, wenn der Finger den Bildschirm verlässt, und die Richtung und Entfernung des Fingergleitens kann in der Anweisung ermittelt werden.

Vue.directive('touchend', {
  bind: function(el, binding) {
    let startX, startY;
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchend', function(event) {
      let endX = event.changedTouches[0].clientX;
      let endY = event.changedTouches[0].clientY;
      let distanceX = endX - startX;
      let distanceY = endY - startY;
      let direction = '';
      if (Math.abs(distanceX) < Math.abs(distanceY)) {
        // 垂直方向滑动
        if (distanceY < 0) {
          direction = 'up';
        } else {
          direction = 'down';
        }
      } else {
        // 水平方向滑动
        if (distanceX < 0) {
          direction = 'left';
        } else {
          direction = 'right';
        }
      }
      binding.value(direction, distanceX, distanceY);
    });
  }
});

In diesem Beispiel verwenden wir die Bind-Hook-Funktion, um den Befehl zu registrieren, hören dann die Ereignisse touchstart und touchend über die Methode addEventListener ab, berechnen den Abstand und die Richtung des Fingergleitens und übergeben die Ergebnisse an die gebundene Funktion der Befehl.

3. Anwendungsszenarien von Sliding Stop

In der mobilen Entwicklung gibt es viele Anwendungsszenarien, die einen Sliding Stop erkennen müssen, z. B. Pull-Down zum Aktualisieren, Pull-Up zum Laden usw. Wir können diese Funktionen umsetzen, indem wir bei der Erkennung eines Gleitstopps entsprechende Ereignisse auslösen.

Am Beispiel von „Pull-to-Refresh“ können wir dem Element, das an die V-Touchend-Anweisung gebunden ist, ein Pulldown-Symbol hinzufügen. Es wird angezeigt, wenn der Benutzer bis zu einer bestimmten Entfernung nach unten zieht Das Aktualisierungsereignis wird automatisch ausgelöst, wenn der Benutzer loslässt.

Vue.directive('pull-refresh', {
  bind: function(el, binding) {
    let startX, startY;
    let refreshHeight = 60; // 下拉刷新高度
    let refreshIcon = document.createElement('img');
    refreshIcon.src = 'https://xxx.com/icons/refresh.png';
    refreshIcon.width = 40;
    refreshIcon.height = 40;
    refreshIcon.style.display = 'none';
    refreshIcon.style.marginLeft = '-20px';
    refreshIcon.style.position = 'absolute';
    refreshIcon.style.top = '-50px';
    el.appendChild(refreshIcon);
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchmove', function(event) {
      let endY = event.changedTouches[0].clientY;
      let distanceY = endY - startY;
      if (distanceY > refreshHeight) {
        refreshIcon.style.display = 'block';
        binding.value();
      } else {
        refreshIcon.style.display = 'none';
      }
    });
  }
});

In diesem Beispiel verwenden wir eine benutzerdefinierte Anweisung v-pull-refresh. Nachdem wir diese Anweisung an das Element gebunden haben, wird das Pulldown-Aktualisierungsereignis ausgelöst, wenn der Benutzer mehr als 60 Pixel herunterzieht.

4. Zusammenfassung

In diesem Artikel werden mobile Sliding-Ereignisse und das Hinzufügen benutzerdefinierter Anweisungen in Vue zur Erkennung von Sliding-Stopps kurz vorgestellt, um Pull-Down-Aktualisierungen und andere Funktionen zu erreichen. Zusätzlich zur Pull-Down-Aktualisierung kann der Schiebestopp auch zum Erzielen von Pull-Up-Ladevorgängen, Bildkarussells und anderen Effekten verwendet werden. Die Beherrschung dieser Schiebesteuerungsfähigkeiten wird eine große Hilfe bei der Verbesserung der Benutzererfahrung mobiler Anwendungen sein.

Das obige ist der detaillierte Inhalt vonSo erkennen Sie einen Gleitstopp in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!