Umgang mit der Überwachung und Verarbeitung von Scroll-Ereignissen in Vue-Komponenten

So handhaben Sie die Überwachung und Verarbeitung von Scroll-Ereignissen in Vue-Komponenten

Bei der Entwicklung von Vue stoßen wir häufig auf Szenarien, die eine Überwachung und Verarbeitung von Scroll-Ereignissen erfordern, wie z. B. die Implementierung von rollierendem Laden, unendlichem Scrollen und anderen Funktionen. In diesem Artikel wird detailliert beschrieben, wie die Überwachung und Verarbeitung von Bildlaufereignissen in Vue-Komponenten gehandhabt wird, und es werden spezifische Codebeispiele bereitgestellt.

1. Scroll-Ereignisse abhören

Es gibt zwei Möglichkeiten, Scroll-Ereignisse in Vue-Komponenten abzuhören: Zum einen durch das Hinzufügen eines Ereignis-Listeners und zum anderen durch die Verwendung eines Drittanbieter-Plug-Ins.

(1) Ereignis-Listener hinzufügen

In der gemounteten Hook-Funktion der Vue-Komponente können Sie Scroll-Ereignisse über die Methode addEventListener abhören. Das Folgende ist ein Beispielcode:

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    // 处理滚动事件的代码
  }
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

Fügen Sie im obigen Code nach Abschluss des Renderns der Komponente einen Scroll-Ereignis-Listener für das Fensterobjekt hinzu und binden Sie die Ereignishandlerfunktion handleScroll an die Methoden der aktuellen Vue-Instanz.

Sie müssen außerdem den Ereignis-Listener über die Methode „removeEventListener“ entfernen, bevor die Komponente zerstört wird, um Speicherverluste zu vermeiden.

(2) Verwenden Sie Plug-Ins von Drittanbietern

Neben dem manuellen Hinzufügen von Listenern unterstützt Vue auch die Verwendung von Plug-Ins von Drittanbietern zur Verarbeitung von Scroll-Ereignissen. Zu den am häufigsten verwendeten Plug-Ins gehören Vue-Scroll, Vue-Infinite-Scroll usw.

Nehmen Sie das Vue-Infinite-Scroll-Plug-In als Beispiel:

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- 内容区域 -->
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll';

export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      if (!this.busy) {
        // 处理滚动事件的代码
      }
    }
  },
  directives: { InfiniteScroll }
}
</script>

Im obigen Code wird das Vue-Infinite-Scroll-Plug-In und die V-Infinite-Scroll-Direktive vorgestellt Wird in der Komponente verwendet, um auf Bildlaufereignisse zu warten. Gleichzeitig können Sie auch das Attribut „infinite-scroll-disabled“ verwenden, um festzulegen, ob das Auslösen von Scroll-Ereignissen deaktiviert werden soll, und das Attribut „infinite-scroll-distance“, um den kritischen Wert festzulegen, der mehr Ladevorgänge auslöst.

2. Umgang mit Bildlaufereignissen

Bei der Verarbeitung von Bildlaufereignissen besteht eine häufige Anforderung darin, festzustellen, ob der Bildlauf den unteren Rand erreicht hat, und entsprechende Vorgänge auszulösen. Hier ist ein Beispielcode für die Verarbeitung des Scroll-Ladens:

loadMore() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + clientHeight + 10 >= scrollHeight && !this.busy) {
    // 处理滚动加载操作
    this.getData();
  }
},
getData() {
  this.busy = true;

  // 发送请求获取数据
  axios.get('http://example.com/api/data').then(response => {
    // 处理获取的数据
    this.dataList.push(response.data);

    this.busy = false;
  }).catch(error => {
    console.error(error);
    this.busy = false;
  });
}

Im obigen Code wird durch Abrufen von scrollTop, clientHeight und scrollHeight des Scroll-Bereichs festgestellt, dass weitere Vorgänge zum Laden ausgelöst werden, wenn der Scroll den unteren Rand erreicht. In der getData-Methode können Sie eine asynchrone Anforderung zum Abrufen von Daten initiieren und die Daten an die vorhandene Datenliste anhängen. Es ist zu beachten, dass beim Senden der Anfrage das Besetzt-Flag auf „True“ gesetzt werden muss, um ein wiederholtes Auslösen des rollierenden Ladevorgangs zu vermeiden.

Zusammenfassung:

In diesem Artikel wird erläutert, wie mit der Überwachung und Verarbeitung von Scroll-Ereignissen in Vue-Komponenten umgegangen wird. Durch manuelles Hinzufügen von Ereignis-Listenern oder die Verwendung von Plug-Ins von Drittanbietern können Sie Scroll-Ereignisse überwachen und verarbeiten. Zu den allgemeinen Anforderungen bei der Verarbeitung von Bildlaufereignissen gehört die Feststellung, ob der Bildlauf den unteren Rand erreicht hat, und das Auslösen entsprechender Vorgänge. Das Obige ist ein einfaches rollierendes Ladebeispiel, das Sie entsprechend den tatsächlichen Anforderungen ändern und erweitern können.

Das obige ist der detaillierte Inhalt vonUmgang mit der Überwachung und Verarbeitung von Scroll-Ereignissen in Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!