So implementieren Sie das unendliche Laden von Daten, indem Sie unter Vue zum Ende der Seite scrollen

Dieses Mal zeige ich Ihnen, wie Sie unter Vue zum Ende der Seite scrollen. Was sind die Vorsichtsmaßnahmen für das Scrollen zum Ende der Seite unter Vue? Schauen Sie es sich unten einmal an.

Ich habe einen Artikel „Implementieren einer unendlichen Schriftrolle mit Vue.js“ gesehen und fand ihn ziemlich praktisch, also habe ich ihn gelesen und als Referenz für diejenigen, die ihn benötigen, kurz übersetzt.

Aus diesem Projekt Sie können das Verständnis des Lebenszyklus von Vue vertiefen, wann mit der Axios-Anfrage begonnen werden soll, wie man mit Vue native JS zum Schreiben von Scroll-Ereignissen verwendet usw. Hier extrahiere und ergänze ich hauptsächlich die Schlüsselpunkte des Originaltextes

Technische Punkte dieses Artikels

1. Vue-Lebenszyklus

2. Axios einfache Verwendung

3. moment.js formatiertes Datum

4. Verzögertes Laden von Bildern

5. Kombiniert mit nativem js, um Scroll-Ereignisse zu schreiben

6. Drosselung anfordern

Projekt erstellen

Erstellen Sie zunächst ein einfaches vue-Projekt

# vue init webpack-simple infinite-scroll-vuejs

Dann installieren Sie einige für das Projekt benötigte Plug-Ins

# npm install axios moment

Benutzerdaten initialisieren

Nachdem das Projekt erstellt wurde, führen Sie es aus und Werfen Sie einen Blick darauf

# npm run dev

Nachdem wir http://localhost:8080 korrekt geöffnet haben, beginnen wir mit der Änderung des Codes.

<script>
import axios from 'axios'
import moment from 'moment'
export default {
 name: 'app',
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format('MM/DD/YYYY')
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

Der ursprüngliche Autor hat auch ausdrücklich darauf hingewiesen Dies ist völlig unnötig und wird nicht empfohlen, wenn die Seite 5 Mal geladen wird. Diese Schnittstelle kann jedoch jeweils nur 1 Daten zurückgeben und dient nur zum Testen. Natürlich kann ich Daten auch über Mock simulieren Ich werde nicht auf Details eingehen~

Weiter Schreiben Sie die Struktur und den Stil der Vorlage wie folgt:

<template>
 <p id="app">
  <h1>Random User</h1>
  <p class="person" v-for="(person, index) in persons" :key="index">
   <p class="left">
    <img :src="person.picture.large" alt="">
   </p>
   <p class="right">
    <p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <p class="text-capitalize">
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </p>
    </ul>
   </p>
  </p>
 </p>
</template>
<style lang="scss">
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;
 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }
 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }
 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

Auf diese Weise kann die Seite die persönlichen Informationen von 5 Personen anzeigen.

Verarbeiten Sie die Logik zum Laden des unendlichen Scrollens

Als nächstes müssen wir scroll() in Methoden hinzufügen, um das Scrollen zu überwachen. Dieses Ereignis sollte innerhalb des Lebenszyklus von mount() liegen :

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

Der Originaltext dieses Codes hat ihn hier korrigiert und auch den Abstand vom unteren Rand zum Starten des Datenflusses erhöht

Speichern Sie es, gehen Sie zurück zum Browser und überprüfen Sie den Effekt. Es gibt kein Problem Das Laden wird auf Vue implementiert, was der normalen Seitenentwicklung ähnelt. Jedes Mal, wenn das Scrollen nicht abgeschlossen ist, wird die nächste Anfrage nicht in das Array übertragen und ein verzögertes Laden durch

Schließlich auch Wenn Sie eine Kopie davon auf GitHub erstellt haben, können Sie einen Blick auf „infinite-scroll-vuejs-demo“ werfen.

Empfohlene Lektüre:

So verwenden Sie JS zur Implementierung der Huffman-Codierung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das unendliche Laden von Daten, indem Sie unter Vue zum Ende der Seite scrollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!