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>

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

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

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

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

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 :

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!