Comment faire en sorte que l'exigence de chargement illimité des données soit en bas de la page coulissante

Cette fois, je vais vous montrer comment faire en sorte que le bas de la page défilante charge des données à l'infini, et quelles sont les précautions à prendre pour faire défiler le bas de la page pour charger des données à l'infini. Ce qui suit est un cas pratique, voyons. jetez un oeil.

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 notre compréhension du cycle de vie de Vue, quand démarrer les requêtes 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 de l'article original

La technologie de cet article Points clés

1. Cycle de vie de Vue

2. Utilisation simple d'axios

3. Format moment.js Date

4. Chargement paresseux des images

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

6. Flux de la section Demande

Créer un projet

Créez d'abord un projet de vue simple

# vue init webpack-simple infinite-scroll-vuejs

Ensuite, installez ce qui est nécessaire au projet Quelques plug-ins

# npm install axios moment

Initialisez les données utilisateur

Une fois le projet construit, exécutez-le et prenez un coup d'oeil

# npm run dev

Ouvrez http://localhost :8080 Une fois l'erreur correcte, nous commençons à modifier le code. Voyons d'abord obtenir les données utilisateur

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

Le. L'auteur original vous rappelle également spécifiquement qu'il est totalement inutile et déconseillé de demander 5 fois lors du chargement de la page. C'est juste que cette interface ne peut renvoyer qu'une seule donnée à la fois, et elle n'est utilisée qu'à des fins de test. Je peux également simuler des données via Mock, donc je n'entrerai pas dans les détails~

Ensuite, écrivons la structure du modèle et le style est le suivant :

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

De cette façon, la page peut afficher les informations personnelles de 5 personnes.

Traitement de la logique de chargement à défilement infini

Nous prendrons Ensuite, vous devez ajouter scroll() dans les méthodes à surveiller 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 contient quelques fautes d'orthographe. a également augmenté la distance depuis le bas pour commencer à charger les données et à intercepter le flux

Enregistrez-le, revenez au navigateur et vérifiez l'effet ~

. Résumé

La fonction de défilement vers le bas de la page et de chargement infini est implémentée sur Vue, ce qui est similaire au développement de page ordinaire. Chaque fois que le chargement par défilement n'est pas terminé, la requête suivante ne sera pas effectuée. être déclenché. Chaque requête est poussée dans le tableau et permet un chargement paresseux via la liaison de données de (en fait, je ne suis pas vraiment d'accord avec 0 0... Après l'avoir lu, j'ai l'impression que). assez simple.

Je pense que vous maîtrisez 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 :

Explication détaillée des propriétés calculées de la vue et des projets pratiques de l'auditeur

Comment faire un pull-up sur le terminal mobile Faites glisser vers le bas pour actualiser le chargement

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!