Comment implémenter le chargement infini de données en faisant défiler vers le bas de la page sous Vue

Cette fois, je vais vous montrer comment implémenter un chargement infini de données en faisant défiler vers le bas de la page sous Vue. Quelles sont les précautions pour faire défiler vers le bas de la page sous Vue. un coup d'oeil une fois.

J'ai vu un article Implémenter un défilement infini avec Vue.js et j'ai pensé que c'était assez pratique, alors je l'ai lu et je l'ai brièvement traduit pour référence pour ceux qui en ont besoin

De ce projet. vous pouvez approfondir la compréhension du cycle de vie de Vue, quand démarrer la requête axios, comment utiliser js natif avec Vue pour écrire des événements de défilement, etc. Ici, j'extrait et complète principalement les points clés du texte original

Points techniques de cet article

1. Cycle de vie de Vue

2. Utilisation simple d'axios

3. Date formatée moment.js

4. Chargement paresseux des images

5. Combiné avec du js natif pour écrire un défilement événements

6. Limitation des demandes

Créer un projet

Créez d'abord un projet simple vue

# vue init webpack-simple infinite-scroll-vuejs

Ensuite, installez quelques plug-ins nécessaires au projet

# npm install axios moment

Initialisez les données utilisateur

Une fois le projet terminé construit, exécutez-le et jetez un œil

# npm run dev

Après avoir ouvert correctement http://localhost:8080, nous avons commencé à modifier le code

<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>

<.>L'auteur original a également spécifiquement rappelé ici que c'est totalement inutile. Il n'est pas recommandé de demander 5 fois lors du chargement de la page, mais cette interface ne peut renvoyer qu'une seule donnée à la fois, et n'est utilisée qu'à des fins de test. Bien sûr, je peux également utiliser Mock pour simuler des données ici, donc je n'entrerai pas dans les détails~

Ensuite, écrivez la structure et le style du modèle, comme suit :

<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>

Dans ce De cette manière, la page peut afficher les informations personnelles de 5 personnes.

Gérer la logique de chargement par défilement infini

Nous devons ensuite ajouter scroll() dans les méthodes pour surveiller le défilement, et cet événement doit être dans le cycle de vie de Mounted(). Le code est le suivant :

<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>

Le texte original de ce code comporte quelques fautes d'orthographe. Je l'ai corrigé ici et j'ai également augmenté la distance. du bas pour commencer à charger les données et à intercepter le flux

Enregistrez-le, retournez dans le navigateur et vérifiez l'effet~

RésuméLa fonction de défilement vers le bas de la page pour charger à l'infini est en fait similaire au développement de page ordinaire sur Vue. Chaque chargement par défilement est inachevé. Dans ce cas, la requête ne sera pas déclenchée la prochaine fois. le tableau. Le chargement paresseux est implémenté via la

liaison de données

de (en fait 0 0 je ne suis pas vraiment d'accord avec ça) ...), après l'avoir lu, il semble assez simple.Enfin, j'en ai également fait une copie sur GitHub Si vous en avez besoin, vous pouvez jeter un œil à infinite-scroll-vuejs-demo~

Je vous crois. J'ai maîtrisé la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser JS pour implémenter le codage Huffman

Comment utiliser Angular CLI pour créer un Angular projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!