Utilisez vue-infinite-loading pour obtenir une fonction de chargement infinie

Cette fois, je vais vous apporter les précautions sur la façon d'utiliser vue-infinite-loading pour obtenir un chargement infini. Jetons un coup d'œil une fois.

Remarque : vue-infinite-loading2.0 ne peut être utilisé que dans Vue.js2.0. Si vous souhaitez l'utiliser dans Vue.js1.0, veuillez installer la version vue-infinite-loading1.3

Comment installer

npm install vue-infinite-loading --save

Méthode d'importation

Méthode d'importation du module ES6

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading
 },
};

Méthode d'importation du module CommonJS

const InfiniteLoading = require('vue-infinite-loading');
export default {
 components: {
   InfiniteLoading
 }
};

Autres méthodes

<script src="vue-infinite-loading.js"></script>

dans Appliquer

directement dans le composant et déclarer la

components:{
  InfiniteLoading
}

partie modèle

<infinite-loading @infinite="infiniteHandler">
  <span slot="no-more">
     我们是有底线的
  </span>
</infinite-loading>

partie js

Déclenchez automatiquement l'événement infiniteHandler lors du défilement vers le bas

infiniteHandler($state) {
     setTimeout(() => {
       const temp = [];
       for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
         temp.push(i);
       }
       this.list = this.list.concat(temp);
       $state.loaded();
       $state.complete();
     }, 1000);
}

Remarque

Si vous utilisez toujours
this.$ refs.infiniteLoading .$emit('$InfiniteLoading:loaded');
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
Un avertissement apparaîtra, vous indiquant qu'il a été modifié pour transmettre des paramètres dans l'état $ utilise cette méthode.

Attributs

distance : C'est la valeur critique pour le défilement. Si la distance jusqu'au bas de l'élément parent scroll est inférieure à cette valeur, la fonction de rappel infiniteHandler sera appelée.

<infinite-loading @infinite="infiniteHandler" distance="Number">
</infinite-loading>

spinner : Avec cet attribut, vous pouvez choisir l'un de vos spinners préférés comme animation de chargement.
spinner="bubbles";
1, bulles
2, cercles
3, par défaut
4, spirale
5, waveDots

<infinite-loading @infinite="infiniteHandler" spinner="String">
</infinite-loading>

direction : Si vous définissez cette propriété sur top, alors ce composant appellera la fonction infiniteHandler lorsque vous faites défiler vers le haut.

Attention : vous devez définir manuellement le scrollTop de l'élément parent scroll sur la valeur correcte après le chargement des données, sinon le composant appellera la fonction infiniteHandler encore et encore.

direction="top"

<infinite-loading @infinite="infiniteHandler" direction="String">
</infinite-loading>

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 php. Site chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de l'exemple html-webpack-plugin du plug-in webpack

Comment implémenter l'authentification de connexion à l'applet WeChat Quan

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!