Wie erstelle ich mit Vue ein unendliches Scroll- und Wasserfall-Flow-Layout?

Vue.js ist ein beliebtes JavaScript-Framework, mit dem Entwickler auf einfache Weise dynamische, reaktionsfähige Webanwendungen erstellen können. Unter ihnen wird es von Entwicklern besonders wegen seiner leistungsstarken Komponentenentwicklungsfähigkeiten bevorzugt. Unendliches Scrollen und Wasserfall-Layout sind zu einem unverzichtbaren Merkmal der modernen Webentwicklung geworden.

Dieser Artikel soll vorstellen, wie man Vue.js in Kombination mit einigen Bibliotheken von Drittanbietern verwendet, um unendliche Scroll- und Wasserfall-Layout-Funktionen zu implementieren.

Unendliches Scrollen erreichen

Unendliches Scrollen bezieht sich darauf, beim Scrollen zum Ende der Seite weiterhin mehr Inhalte zu laden und so eine unendliche Erweiterung des Seiteninhalts zu erreichen. Diese Technik funktioniert für Tausende von Dateneinträgen und kann das Benutzererlebnis erheblich verbessern.

Vorbereitung der Datenquelle

Zuerst müssen wir eine Datenquelle vorbereiten, die zumindest einige Datenelemente enthält. Hier verwenden wir ein einfaches Beispiel zur Veranschaulichung. Angenommen, wir haben eine Liste mit unendlich scrollbaren Datenelementen, die 100 Datenelemente enthält. Die Datenquelle kann wie folgt aussehen:

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

Installieren und verwenden Sie die Vue-Infinite-Scroll-Bibliothek Bibliothek namens vue-infinite-scroll, die den Kernmechanismus der Infinite-Scroll-Funktionalität sowie die erforderlichen Anweisungen und Komponenten bereitstellt. Um diese Bibliothek zu installieren, können Sie den npm-Befehl verwenden:

npm install vue-infinite-scroll

Registrieren Sie die erforderlichen Anweisungen global:

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

In unserer Komponente müssen wir einige Konfigurationen und Daten festlegen:

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Codebeschreibung

v- infinite -scroll="loadMore": wird verwendet, um die Rückruffunktion anzugeben, um mehr Daten zu laden

• infinite-scroll-disabled="busy": wird verwendet, um anzugeben, ob derzeit Daten angefordert werden v-infinite-scroll="loadMore"：用于指定加载更多数据的回调函数
• infinite-scroll-disabled="busy"：用于指定当前是否正在请求数据
• infinite-scroll-distance="10"
infinite-scroll-distance="10": wird verwendet, um das Ladedatenverhalten auszulösen, wenn angegeben wird, wie viele Pixel die Bildlaufleiste von unten entfernt ist.

Implementierung des Wasserfall-Flusslayouts.

Wasserfall ist ein Das Kernkonzept des gemeinsamen Layouts besteht darin, dass Elemente unterschiedlicher Größe in derselben Zeile angezeigt werden können, und das Wasserfall-Flow-Layout passt sich automatisch der Anzahl der Elemente an. Wir können eine Vue-Komponentenbibliothek eines Drittanbieters namens vue-waterfall verwenden, um das Wasserfall-Layout mit nur wenigen Codezeilen einfach zu implementieren.

Installieren und verwenden Sie die Vue-Waterfall-Bibliothek.

Zuerst müssen wir die Vue-Waterfall-Komponentenbibliothek installieren:

npm install vue-waterfall

Die Komponente global registrieren:

import waterfall from 'vue-waterfall'
Vue.use(waterfall)

Dann können wir das Wasserfall-Flusslayout in der Komponente verwenden:

<template>
  <waterfall>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </waterfall>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Codebeschreibung

Dieser Code verwendet die Axios-Bibliothek, um Daten aus einer Datenquelle abzurufen. Die Struktur der Daten ist ungefähr wie folgt:

[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]

Optimieren Sie unendliche Scroll- und Wasserfallfluss-Layouts

In realen Anwendungsszenarien tatsächlich unendlich Scrollen und Wasserfall werden verarbeitet. Ein häufiges Problem beim Flow-Layout: Wenn die Datenquelle sehr groß ist, sinkt die Leistung der Komponente stark, was dazu führt, dass die Reaktion langsam wird oder sogar hängen bleibt. Hier stellen wir einige Optimierungsstrategien zur Verbesserung der Komponentenleistung vor.

Verwenden Sie die virtuelle Bildlauftechnologie.

Die Grundidee der virtuellen Bildlauftechnologie besteht darin, nur die vom Benutzer gesehenen Daten gemäß dem Anzeigeintervall zu rendern, anstatt alle Daten zu rendern. Auf diese Weise können wir die Rendering-Kosten der Komponente erheblich reduzieren und so die Leistung verbessern. Die Komponente vue-virtual-scroll-list ist eine zuverlässige Bibliothek zur Implementierung von virtuellem Scrollen, die in Verbindung mit den Bibliotheken vue-infinite-scroll oder vue-waterfall verwendet werden kann.

Installieren Sie die Vue-Virtual-Scroll-List-Bibliothek:

npm install vue-virtual-scroll-list

Wenn Sie diese Bibliothek verwenden, müssen Sie die folgenden Änderungen an der Komponente vornehmen:

<template>
  <virtual-scroll-list :size="75" :remain="10" :items="items" :key-field="'id'">
    <div slot-scope="{item}">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </virtual-scroll-list>
</template>
<script>
import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Unter anderem ersetzen wir die Vue-Waterfall-Komponente durch die Vue-Virtual -Scroll-List-Komponente, um einen virtuellen Scroll-Effekt zu erzielen.

Teilweises Laden

Eine weitere Möglichkeit, den Stress beim Rendern von Komponenten zu reduzieren, besteht darin, Daten in Teilen zu laden. Diese Methode ähnelt dem zuvor erwähnten unendlichen Scrollen, aber beim Laden von Daten werden segmentierte Daten bei Bedarf geladen, anstatt alle Daten auf einmal abzurufen. Wie implementiert man segmentiertes Laden? Eine einfache Lösung besteht darin, jeweils nur die ersten N Daten zu laden und dann die nächsten Daten zu laden, nachdem der Benutzer nach unten gescrollt hat. Diese Methode eignet sich für Situationen, in denen die Datenmenge relativ groß ist.

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

In diesem Code haben wir die LoadMore-Funktion geändert. Es werden jetzt nur die ersten 10 Seiten mit Daten abgerufen. Selbst wenn viele Daten vorhanden sind, kann auf diese Weise die Belastung der Komponente durch schrittweises Laden verringert werden.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man mit Vue.js unendliche Scroll- und Wasserfall-Layoutfunktionen erstellt, und außerdem einige Optimierungsmaßnahmen implementiert, um die Leistung von Komponenten zu verbessern. Im Allgemeinen reichen die drei Bibliotheken vue-infinite-scroll, vue-waterfall und vue-virtual-scroll-list aus, um unsere Arbeit abzuschließen, aber in der tatsächlichen Entwicklung müssen wir auch verschiedene Szenarien und unterschiedliche Datenstrukturen berücksichtigen die Lösung, die am besten zu Ihrem aktuellen Projekt passt. 🎜

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Vue ein unendliches Scroll- und Wasserfall-Flow-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!