Wie implementiert man das Scrollen von Bildern oder Listen in Vue?

Da Webanwendungen immer komplexer werden, müssen wir oft eine große Anzahl von Bildern oder Listen auf der Seite anzeigen. Wenn Sie den gesamten Inhalt auf einmal laden, wirkt sich dies stark auf die Ladegeschwindigkeit der Seite und das Benutzererlebnis aus. In diesem Fall hat sich die rollende Beladung zu einer sehr beliebten Methode entwickelt.

Scrollendes Laden, auch unendliches Scrollen genannt, bezieht sich auf das Anfordern nachfolgender Daten in Echtzeit durch AJAX-Technologie, während der Benutzer die Seite scrollt. Diese Technologie wird häufig auf Social-Media-Seiten wie Facebook, Twitter, Instagram usw. eingesetzt, um ein effizientes Erlebnis zu erreichen.

In Vue.js gibt es normalerweise zwei Möglichkeiten, das rollierende Laden zu implementieren: Eine besteht darin, selbst Code zu schreiben, und die andere darin, ein Plug-In eines Drittanbieters zu verwenden. Als nächstes werden wir sie einzeln vorstellen.

1. Schreiben Sie Ihren eigenen Code, um das rollierende Laden zu implementieren

Vue.js bietet eine sehr praktische V-Scroll-Anweisung, mit der Sie die Scroll-Ereignisse der Seite überwachen können. Wir können feststellen, ob der scrollTop-Abstand des div-Elements beim Scrollen den unteren Rand erreicht. Wenn er den unteren Rand erreicht, werden nachfolgende Datenanforderungen ausgelöst.

Das Folgende ist ein Beispielcode, der V-Scroll verwendet, um das Scrollen beim Laden von Bildern zu implementieren:

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

In diesem Beispiel verwenden wir V-Scroll, um das Scroll-Ereignis des div-Elements abzuhören und festzustellen, ob es den Tiefpunkt erreicht hat In der onScroll-Methode wird am Ende die Methode „loadImages“ ausgelöst, die eine asynchrone Anforderung von Daten simuliert und die Daten in das Array „images“ schiebt. Um das Benutzererlebnis zu verbessern, haben wir außerdem eine Ladevariable hinzugefügt, die angibt, dass Daten in Echtzeit geladen werden.

2. Verwenden Sie Plug-Ins von Drittanbietern, um das Rolling Loading zu implementieren.

Zusätzlich dazu, dass wir selbst Code schreiben, um das Rolling Loading zu implementieren, können wir auch einige Plug-Ins von Drittanbietern verwenden, um das Rolling Loading zu implementieren. Hier stellen wir zwei häufig verwendete Plug-Ins vor, nämlich vue-infinite-scroll und vue-virtual-scroll-list.

1. vue-infinite-scroll-Plugin

vue-infinite-scroll ist ein auf Vue.js basierendes Infinite-Scroll-Plugin, das uns dabei helfen kann, Scroll-Ladelisten, Bilder und andere Szenarien zu realisieren. Die Verwendung dieses Plug-Ins ist sehr einfach. Sie müssen lediglich die Anweisung v-infinite-scroll zu der Komponente hinzufügen, die das rollierende Laden implementieren muss, und dann die Methode angeben, die das rollierende Laden auslösen muss.

Das Folgende ist ein Beispielcode, der das Vue-Infinite-Scroll-Plug-In verwendet, um eine Scroll-Ladeliste zu implementieren:

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

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

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

In diesem Beispiel haben wir das Vue-Infinite-Scroll-Plug-In zunächst über npm installiert und eingeführt in das Bauteil ein. Anschließend verwenden wir Mixins, um eine Vue-Instanz in die aktuelle Komponente zu mischen, die automatisch ein Unendlich-Scroll-Ereignis erstellt, das ausgelöst werden kann. Schließlich geben wir die Methode „loadMore“ in der Direktive „v-infinite-scroll“ an, die eine asynchrone Anforderung von Daten simuliert und die Daten in das Array „items“ schiebt.

2. vue-virtual-scroll-list-Plugin

vue-virtual-scroll-list ist ein virtuelles Scrolling-Plugin basierend auf Vue.js, das uns dabei helfen kann, schnell umfangreiche Listen-Scrolling-Funktionen zu implementieren und die Seite zu verbessern Leistung und Benutzererfahrung. Im Gegensatz zum herkömmlichen Scroll-Laden verwendet vue-virtual-scroll-list die virtuelle Scroll-Technologie, um Datenelemente nur im aktuell sichtbaren Bereich zu rendern, wodurch eine große Anzahl von DOM-Renderings und -Neuanordnungen vermieden und die Effizienz und Glätte der Seitenausgaben verbessert werden .

Das Folgende ist ein Beispielcode, der das Vue-Virtual-Scroll-List-Plug-In verwendet, um eine Scroll-Ladeliste zu implementieren:

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

In diesem Beispiel haben wir zuerst das Vue-Virtual-Scroll-List-Plug-In durch installiert npm und führte es in die Komponente ein. Anschließend verwenden wir die Komponente in der Vorlage, die Parameter wie Größe, Rest, Datenschlüssel, Datenquellen und Datenkomponente akzeptiert.

Unter diesen gibt der Größenparameter die Höhe jedes Datenelements an, der verbleibende Parameter gibt die Anzahl der Vorrenderings an, Datenschlüssel gibt das Feld an, das zur eindeutigen Identifizierung jedes Datenelements verwendet wird, und Datenquellen geben die Datenliste an muss gerendert werden, data-component gibt die Rendering-Komponente des Datenelements an. Schließlich führen wir die Logik der asynchronen Datenanforderung im Ladeereignis aus.

Fazit

Durch die obige Einführung können wir feststellen, dass es viele Möglichkeiten gibt, das Scrollen von Bildern oder Listen in Vue.js zu implementieren. Obwohl das Schreiben von Code selbst flexibel ist, erfordert es viel Code und erfordert einen gewissen Zeit- und Energieaufwand. Die Verwendung von Plug-Ins von Drittanbietern ist zwar einfach, erfordert jedoch ein tiefgreifendes Verständnis der Prinzipien und der Verwendung von Plug-Ins um das Geschäft besser zu entwickeln. Daher müssen Sie bei der Implementierung des rollierenden Ladens eine Methode auswählen, die basierend auf dem spezifischen Geschäftsszenario und Ihrer eigenen Stärke zu Ihnen passt.

Das obige ist der detaillierte Inhalt vonWie implementiert man das Scrollen von Bildern oder Listen in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!