Maison > interface Web > js tutoriel > vue-infinite-loading crée un effet de chargement infini

vue-infinite-loading crée un effet de chargement infini

php中世界最好的语言
Libérer: 2018-06-09 15:41:52
original
1845 Les gens l'ont consulté

Cette fois, je vais vous proposer vue-infinite-loading pour créer un effet de chargement infini. Quelles sont les précautions à prendre pour que vue-infinite-loading crée un effet de chargement infini ? Voici un cas pratique, jetons un coup d'oeil.

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
Copier après la connexion

Méthode d'importation

Méthode d'importation du module ES6

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading
 },
};
Copier après la connexion

Méthode d'importation du module CommonJS

const InfiniteLoading = require('vue-infinite-loading');
export default {
 components: {
   InfiniteLoading
 }
};
Copier après la connexion

Autres méthodes

<script src="vue-infinite-loading.js"></script>
Copier après la connexion

dans Appliquer

directement dans le composant et déclarer la

components:{
  InfiniteLoading
}
Copier après la connexion

partie modèle

<infinite-loading @infinite="infiniteHandler">
  <span slot="no-more">
     我们是有底线的
  </span>
</infinite-loading>
Copier après la connexion

partie js

L'événement infiniteHandler est automatiquement déclenché 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);
}
Copier après la connexion

Remarque

Si vous utilisez toujours
this.$refs.infiniteLoading.$ submit('$ 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 $state.

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>
Copier après la connexion

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>
Copier après la connexion

direction : Si vous définissez cette propriété sur top, 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>
Copier après la connexion

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 :

Utilisation immédiate de watch dans le projet vue

Comment utiliser le plug-in d'installation en temps réel projets

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal