Eine vollständige Anleitung zum unendlichen Scrollen mit Vue.js

Da die Datenmenge immer weiter zunimmt, ist das scrollende Laden von Webseiten nach und nach zu einem wichtigen Teil des Benutzererlebnisses geworden. In diesem Beitrag besprechen wir eine vollständige Anleitung zur Implementierung des unendlichen Scroll-Ladens mit Vue.js.

Was ist unendliches Scrollen?

Infinite Scroll Loading, auch bekannt als Infinite Scroll, ist eine Webdesign-Technik, mit der mehr Inhalte hinzugefügt werden, wenn der Benutzer die Seite nach unten scrollt. Diese Technologie wird häufig in Blogs, sozialen Medien, Online-Shops und anderen Websites verwendet, die Inhalte dynamisch anzeigen müssen.

Unendliches Scrollen unterscheidet sich von der Paginierung. Beim herkömmlichen Paging müssen Benutzer Seiten umblättern, um den Inhalt der nächsten Seite zu laden. Beim unendlichen Scrollen lädt die Seite automatisch den Inhalt der nächsten Seite und Benutzer können die Liste weiter durchsuchen, ohne die Seiten umzublättern.

Was ist Vue.js?

Vue.js ist ein leichtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es verfügt über eine gute Skalierbarkeit und Wartbarkeit und lässt sich leicht in bestehende Projekte integrieren. Vue.js bietet viele nützliche Funktionen, wie z. B. bidirektionale Datenbindung, Komponentenarchitektur und virtuelles DOM, wodurch die Entwicklung von Webanwendungen schneller und einfacher wird.

Jetzt beginnen wir mit der Erkundung, wie man mit Vue.js das Laden unendlicher Bildläufe implementiert.

Schritt 1: Bereiten Sie das Projekt vor

Zuerst müssen wir das Vue.js-Projekt über Node.js und npm einrichten. Erstellen Sie dann eine Vue.js-Komponente, um unsere Listenelemente anzuzeigen.

Installieren Sie Vue.js und bereiten Sie das Projekt vor:

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

Erstellen Sie die Komponente:

Sie können den folgenden Befehl verwenden, um die Komponente zu erstellen:

vue generate component List

Schritt 2: Implementieren Sie unendliches Scrollen

Hier ist der wichtigste Teil: Wie um unendliches Scrollen zu erreichen.

Angenommen, wir haben eine API, die eine Paginierung erfordert und eine Seite mit Daten und die URL-Adresse der nächsten Seite zurückgibt.

Um ein unendliches Scrollen zu erreichen, müssen wir die nächste Datenseite laden, bis keine Daten mehr verfügbar sind oder der Benutzer aufhört, auf der Seite zu scrollen. Wir können die watch-API von Vue.js verwenden, um auf Scroll-Ereignisse zu warten und ein Ereignis auszulösen, um die nächste Seite zu laden, wenn zum Ende der Seite gescrollt wird. watch API来监听滚动事件，并在滚动到页面底部时触发加载下一页的事件。

在我们之前创建的组件中，添加如下代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1"
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      const response = await fetch(this.nextUrl);
      const data = await response.json();
      this.items = [...this.items, ...data.items];
      this.nextUrl = data.nextUrl;
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

我们首先定义了两个数据项：items和nextUrl，items用来存储已经加载的列表项，nextUrl则用来存储下一页的URL地址。

在mounted生命周期钩子中，我们绑定了handleScroll方法到滚动事件中。

我们使用watch API监听了路由变化事件，这里是为了在组件被重用时重新绑定滚动事件。

loadMore方法用来加载下一页的数据。我们使用fetch API来获取数据并将其加入到items数组中。handleScroll方法用于检查滚动事件，当页面滚动到底部时，调用loadMore方法加载下一页的数据。

最后，我们在组件销毁的时候解除对滚动事件的监听。

现在，我们已经完成了无限滚动的实现。每当用户滚动到页面底部时，下一页的数据就会自动加载。

步骤三：加入加载提示和错误提示

更好的用户体验通常需要在列表末尾加入一个加载提示，同时在出现错误时也需要显示一个错误提示。

在之前的组件中添加如下代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="isLoading">Loading...</div>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1",
      isLoading: false,
      errorMessage: null
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      try {
        this.isLoading = true;
        const response = await fetch(this.nextUrl);
        const data = await response.json();
        this.items = [...this.items, ...data.items];
        this.nextUrl = data.nextUrl;
      } catch (error) {
        this.errorMessage = "Something went wrong." + error.message;
      } finally {
        this.isLoading = false;
      }
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

我们添加了isLoading和errorMessage两个数据项，分别用于显示加载提示和错误提示。在loadMore方法中，我们添加了try-catch块来捕获数据加载时可能出现的错误，并在最后finally块中关闭加载提示。在errorMessage

Fügen Sie in der zuvor erstellten Komponente den folgenden Code hinzu:

rrreee

Wir definieren zunächst zwei Datenelemente: items und nextUrl, itemsCode > wird verwendet, um das geladene Listenelement zu speichern, und nextUrl wird verwendet, um die URL-Adresse der nächsten Seite zu speichern.

Im mounted-Lebenszyklus-Hook binden wir die handleScroll-Methode an das Scroll-Ereignis.

Wir haben die API watch verwendet, um auf Routenänderungsereignisse zu warten, hier um das Scroll-Ereignis neu zu binden, wenn die Komponente wiederverwendet wird.

loadMore-Methode wird verwendet, um die Daten der nächsten Seite zu laden. Wir verwenden die API fetch, um die Daten abzurufen und sie dem Array items hinzuzufügen. Die Methode handleScroll wird verwendet, um das Scroll-Ereignis zu überprüfen. Wenn die Seite nach unten scrollt, wird die Methode loadMore aufgerufen, um die Daten der nächsten Seite zu laden.

Abschließend geben wir die Überwachung von Scroll-Ereignissen frei, wenn die Komponente zerstört wird. 🎜🎜Jetzt haben wir die Infinite-Scroll-Implementierung abgeschlossen. Immer wenn der Benutzer zum Ende der Seite scrollt, werden die Daten für die nächste Seite automatisch geladen. 🎜🎜Schritt 3: Ladeaufforderungen und Fehlermeldungen hinzufügen🎜🎜Eine bessere Benutzererfahrung erfordert normalerweise das Hinzufügen einer Ladeaufforderung am Ende der Liste und die Anzeige einer Fehlermeldung, wenn ein Fehler auftritt. 🎜🎜Fügen Sie den folgenden Code zur vorherigen Komponente hinzu: 🎜rrreee🎜Wir haben zwei Datenelemente hinzugefügt: isLoading und errorMessage, die zum Anzeigen von Ladeaufforderungen bzw. Fehleraufforderungen verwendet werden. In der Methode loadMore fügen wir einen Try-Catch-Block hinzu, um Fehler abzufangen, die beim Laden von Daten auftreten können, und schließen die Ladeaufforderung im Final-Block. Fehlerinformationen in errorMessage anzeigen. 🎜🎜Jetzt haben wir eine fertige, unendlich scrollbare Liste mit Ladeaufforderungen und Fehlermeldungen. 🎜🎜Fazit🎜🎜In diesem Artikel haben wir gelernt, wie man mit Vue.js eine unendlich scrollende Ladeliste implementiert. Wir lernten wichtige Technologien wie die Überwachung von Scroll-Ereignissen, das dynamische Laden von Daten, das Laden von Displays und Fehlermeldungen kennen. 🎜🎜Bei der Implementierung von unendlichem Scrollen müssen wir darauf achten, nicht zu viele Daten auf einmal zu laden, was zu Leistungseinbußen führt. Wir sollten den Benutzern auch entsprechende Ladeaufforderungen und Fehleraufforderungen zur Verfügung stellen, um die Benutzererfahrung zu verbessern. 🎜🎜Natürlich ist dies nur ein einfaches Beispiel. Vue.js bietet mehr Funktionen und APIs, sodass wir komplexere Komponenten und Anwendungen erstellen können. Ich hoffe, dieser Artikel kann für Sie hilfreich sein. 🎜

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zum unendlichen Scrollen mit Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!