Vue fährt bis zum Ende der Seite herunter und lädt die Daten sofort

Dieses Mal zeige ich Ihnen, welche Vorsichtsmaßnahmen es gibt, damit Vue die Daten sofort lädt, wenn Sie sie an das Ende der Seite ziehen. Hier ist ein praktischer Fall, schauen wir uns das an.

Mit diesem Projekt können Sie 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 den Schlüssel Punkte 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 native js zum Schreiben von Scroll-Ereignissen

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

Nach dem Projekt ist erstellt, führen Sie es aus und schauen Sie es sich an

# npm run dev

Nachdem wir http://localhost:8080 korrekt geöffnet haben, beginnen wir zunächst 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>

Die Der ursprüngliche Autor hat hier auch ausdrücklich darauf hingewiesen, dass die Anforderung beim Laden der Seite fünfmal erfolgt, diese Schnittstelle jedoch jeweils nur ein Datenelement zurückgeben kann, das natürlich nur zum Testen verwendet wird , ich kann Daten auch über Mock simulieren, daher werde ich nicht auf Details eingehen~

Als nächstes 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 Zeigt die persönlichen Informationen von 5 Personen an.

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, und dieses Ereignis sollte dies tun innerhalb des Lebenszyklus von mount() sein. Der Code lautet wie 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 lautet. Ich habe ihn hier korrigiert und auch den Abstand zum Unten, um mit dem Laden der Daten und dem Abfangen des Flusses zu beginnen.

Speichern Sie es, gehen Sie zurück zum Browser und überprüfen Sie den Effekt. Es gibt kein Problem 🎜>

Die Funktion zum Scrollen zum Ende der Seite und zum unendlichen Laden ist in Vue implementiert, was der normalen Seitenentwicklung ähnelt. Jedes Mal, wenn das Scrollen nicht abgeschlossen ist, wird die Anforderung nicht einmal ausgelöst Die Anfrage wird in das Array gepusht und das verzögerte Laden wird durch

Datenbindung von implementiert (eigentlich 0 0, ich bin damit nicht wirklich einverstanden...), Nach dem Lesen fühlt es sich nicht ganz einfach an?

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der vue-cli3.0-Konfiguration

Angular CLI detaillierte Erläuterung der Schritte zum Erstellen eines Angular Projekt

Das obige ist der detaillierte Inhalt vonVue fährt bis zum Ende der Seite herunter und lädt die Daten sofort. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!