Wie implementiert man eine unendlich scrollende Liste mit Vue?

In Webanwendungen sind Bildlauflisten eine sehr häufige Möglichkeit, Daten anzuzeigen, während unendliche Bildlauflisten eine Möglichkeit zum dynamischen Laden weiterer Daten darstellen. Es ist nicht schwierig, eine unendliche Bildlaufliste in Vue zu implementieren. Mit einigen einfachen Operationen können wir leicht eine unendliche Bildlaufliste implementieren.

1. Daten vorbereiten

Zuerst müssen wir die anzuzeigenden Daten vorbereiten. Im Allgemeinen werden diese Daten über Schnittstellen bezogen. In diesem Beispiel können wir eine gefälschte Datenquelle verwenden, um das Erhalten von Daten zu simulieren:

const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

2. Um unendliches Scrollen zu erreichen

Als nächstes müssen wir Vues Anweisung v-infinite-scroll verwenden, um unendlich zu implementieren Scrollen. Zuerst benötigen wir in unserer Vorlage einen Container zum Anzeigen von Daten und legen eine Anweisung für diesen Container fest, wie unten gezeigt: v-infinite-scroll 来实现无限滚动。首先，在我们的模板中，需要有一个容器来展示数据，并且给这个容器设置一个指令，如下所示：

<div class="list" v-infinite-scroll="loadMore">
  <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
</div>

在这里，我们通过 v-infinite-scroll 指令来触发对应的方法 loadMore，这个方法将根据当前展示的数据来动态加载更多数据。另外，在这个容器中，我们使用了 v-for 指令来遍历整个数据列表，并将其展示到页面上。

接下来，我们需要实现 loadMore 方法。在这个方法中，首先获取当前数据列表中最后一条数据的下标 lastIndex，然后使用一些异步操作来动态加载更多的数据，并将这些数据添加到当前的数据列表中。

methods: {
  loadMore() {
    const lastIndex = this.items.length - 1;
    const lastItem = this.items[lastIndex];
    const nextIndex = lastItem.id + 1;

    setTimeout(() => {
      const newData = data
        .slice(nextIndex - 1, nextIndex + 9)
        .map(item => {
          return {
            id: item.id,
            content: item.content
          };
        });

      this.items = [...this.items, ...newData];
    }, 1000);
  }
}

在这里，我们通过 setTimeout 来模拟异步加载数据的操作。首先，获取当前数据列表中最后一条数据的下标 lastIndex，并将其作为加载更多数据的起始点。然后，通过 slice 方法来截取数据源中的一段数据，并通过 map 方法来将其转换为当前应用使用的数据格式。最后，将这些新数据添加到当前的数据列表中。

需要注意的是，我们在加载数据时并没有一次性加载全部数据，而是通过 slice

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
  </div>
</template>

<script>
const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

export default {
  data() {
    return {
      items: data.slice(0, 10).map(item => {
        return {
          id: item.id,
          content: item.content
        };
      })
    };
  },

  methods: {
    loadMore() {
      const lastIndex = this.items.length - 1;
      const lastItem = this.items[lastIndex];
      const nextIndex = lastItem.id + 1;

      setTimeout(() => {
        const newData = data
          .slice(nextIndex - 1, nextIndex + 9)
          .map(item => {
            return {
              id: item.id,
              content: item.content
            };
          });

        this.items = [...this.items, ...newData];
      }, 1000);
    }
  }
};

Hier verwenden wir die Anweisung v-infinite-scroll, um das auszulösen entsprechende Methode loadMore Diese Methode lädt dynamisch weitere Daten basierend auf den aktuell angezeigten Daten. Darüber hinaus verwenden wir in diesem Container die Anweisung v-for, um die gesamte Datenliste zu durchlaufen und auf der Seite anzuzeigen.

3. Als nächstes müssen wir die Methode loadMore implementieren. Rufen Sie bei dieser Methode zunächst den Index lastIndex der letzten Daten in der aktuellen Datenliste ab und verwenden Sie dann einige asynchrone Vorgänge, um dynamisch weitere Daten zu laden und diese Daten zur aktuellen Datenliste hinzuzufügen.
rrreee

Hier verwenden wir setTimeout, um das asynchrone Laden von Daten zu simulieren. Rufen Sie zunächst den Index lastIndex des letzten Datenelements in der aktuellen Datenliste ab und verwenden Sie ihn als Ausgangspunkt für das Laden weiterer Daten. Verwenden Sie dann die Methode slice, um ein Datenelement aus der Datenquelle abzufangen, und verwenden Sie die Methode map, um es in das von der aktuellen Anwendung verwendete Datenformat zu konvertieren. Fügen Sie diese neuen Daten abschließend zur aktuellen Datenliste hinzu.

Es ist zu beachten, dass wir beim Laden von Daten nicht alle Daten auf einmal geladen haben, sondern jeweils nur die folgenden zehn Daten über die Methode slice geladen haben. Dies hat den Vorteil, dass die Leistung der Anwendung verbessert werden kann und vermieden wird, dass das Laden großer Datenmengen auf einmal zu einer übermäßigen Belastung der Anwendung führt.

🎜Vollständiger Code🎜🎜🎜Das Folgende ist der vollständige Beispielcode, einschließlich Datenvorbereitung, Vorlage und Methodenimplementierung. 🎜rrreee🎜In diesem Beispiel verwenden wir eine gefälschte Datenquelle, um den Vorgang der Datenbeschaffung zu simulieren. In praktischen Anwendungen müssen wir unsere eigene Datenquelle verwenden und dann durch asynchrone Vorgänge dynamisch mehr Daten laden. Mit einer so einfachen Operation können wir eine unendliche Bildlaufliste basierend auf Vue implementieren. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man eine unendlich scrollende Liste mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!