Unten auf der verschiebbaren Seite erfahren Sie, wie Sie den Ladedatenbedarf unbegrenzt erhöhen

Dieses Mal werde ich Ihnen vorstellen, wie Sie Daten am unteren Rand der Bildlaufseite unbegrenzt laden können und welche Vorsichtsmaßnahmen für das unbegrenzte Laden von Daten am unteren Rand der Bildlaufseite gelten , lass uns einen Blick darauf werfen.

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 Ihr Verständnis des Lebenszyklus von Vue vertiefen, wann Sie Axios-Anfragen starten, wie Sie mit Vue native JS zum Schreiben von Scroll-Ereignissen verwenden usw. Hier extrahiere und ergänze ich hauptsächlich die wichtigsten Punkte des Originalartikels

Die Technologie dieses Artikels. Kernpunkte

1. Vue-Lebenszyklus

2. Axios einfache Verwendung

3. moment.js-Format Datum

4. Verzögertes Laden von Bildern

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

6. Abschnitt Flow anfordern

Projekt erstellen

Erstellen Sie zunächst ein einfaches Vue-Projekt

# vue init webpack-simple infinite-scroll-vuejs

und dann einige für das Projekt benötigte Plug-Ins installieren

# 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 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 erinnert hier auch ausdrücklich daran Es ist unnötig und es wird nicht empfohlen, beim Laden der Seite 5 Mal anzufordern, aber diese Schnittstelle kann jeweils nur 1 zurückgeben. Dies geschieht natürlich nur zum Testen, ich kann die Daten hier also auch nicht simulieren Gehen Sie auf die Details ein~

Als nächstes schreiben wir 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.

Verarbeitung der Logik zum Laden unendlicher Bildläufe

Als nächstes müssen wir scroll() in Methoden zum Überwachen des Bildlaufs hinzufügen, und dieses Ereignis sollte im Lebenszyklus von mount() liegen folgt:

<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 erhöht

Speichern Sie es, gehen Sie zurück zum Browser und überprüfen Sie den Effekt. Es gibt kein Problem wird auf Vue implementiert und ähnelt der normalen Seitenentwicklung. Jedes Mal, wenn das Scrollen nicht abgeschlossen ist, wird die nächste Anfrage nicht über 's ausgelöst Die Datenbindung implementiert Lazy Loading (eigentlich 0 0 Ich bin damit nicht wirklich einverstanden ...) Nachdem ich den Fall gelesen habe, glaube ich, dass Sie ihn ganz einfach beherrschen Artikel, für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der von Vue berechneten Eigenschaften und praktischer Listener-Projekte

Wie man Pull-Up macht Das mobile Endgerät nach unten schieben, um den Ladevorgang zu aktualisieren

Das obige ist der detaillierte Inhalt vonUnten auf der verschiebbaren Seite erfahren Sie, wie Sie den Ladedatenbedarf unbegrenzt erhöhen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!