Méthode de chargement infini vue-infinite-loading dans Vue

Cet article présente principalement la méthode vue-infinite-loading de chargement infini dans Vue. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente la méthode de chargement infini de vue-infinite-loading dans Vue et la partage avec tout le monde. Les détails sont les suivants :

Remarque : vue-infinite-loading2. 0 ne peut être utilisé que dans Utilisé 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>

Appliquer

directement dans le composant et déclarer

components:{
  InfiniteLoading
}

Partie modèle

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

partie js

Déclencher 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 utiliser cette méthode pour passer des paramètres dans $état.

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 défilant 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>

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. vous sera utile à l'avenir. Tout le monde est utile.

Articles connexes :

Comment ajax dans jquery renvoie des résultats au lieu de rappels, c'est-à-dire exécutés dans le même ordre

vue Résumé de plusieurs problèmes rencontrés lors du traitement des données obtenues par storejs

Solution au problème selon lequel l'environnement de développement local du webpack n'est pas accessible par IP

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!