Vue descend vers le bas de la page et charge les données immédiatement

Cette fois, je vais vous montrer quelles sont les précautions pour que Vue charge les données immédiatement lorsque vous les tirez vers le bas de la page. Voici un cas pratique, jetons un oeil.

À partir de ce projet, vous pouvez approfondir votre 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 la clé points du texte original.

Points techniques de cet article

1. Vue cycle de vie

2. Utilisation simple d'Axios

3. Date formatée moment.js

4. Chargement paresseux des images

5. Combiné avec js natif pour écrire des événements de défilement

6. Limitation des demandes

Créer un projet

Créez d'abord un projet vue simple

# 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 construit, exécutez-le Regardez

# npm run dev

Après avoir ouvert http://localhost:8080 correctement, nous commençons à modifier le code, regardons d'abord l'obtention des 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>

L'auteur original ici est également spécialisé dans le rappel, il est totalement inutile et déconseillé de demander 5 fois lors du chargement de la page. Cependant, cette interface ne peut renvoyer qu'une seule donnée à la fois. Elle n'est utilisée qu'à des fins de test. . Bien sûr, je peux également utiliser Mock pour simuler les données ici, il n'est donc pas nécessaire d'en parler en détail~

Écrivons ensuite 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>

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

Traitement de la logique de chargement du défilement infini

Nous devons ensuite ajouter le défilement( ) 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 contient quelques fautes d'orthographe. ici, et a également augmenté la distance depuis le bas pour commencer à charger les données et intercepter le flux.

Enregistrez-le et revenez au navigateur, vérifiez l'effet, il n'y a pas de problème ~

Résumé

La fonction de chargement infini de défilement vers le bas de la page est en fait implémentée sur Vue et est similaire au développement de page ordinaire, à chaque fois. Si le chargement roulant n'est pas terminé, la requête suivante sera ne soit pas déclenché. Chaque requête est poussée dans le tableau. Le chargement paresseux est implémenté via la liaison de données de .), après l'avoir lu, cela semble 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 de la configuration de vue-cli3.0

Explication détaillée de la CLI angulaire des étapes 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!