vue-infinite-loading2.0 Explication détaillée de la documentation chinoise

Cet article présente principalement l'explication détaillée de la documentation chinoise de vue-infinite-loading2.0. Maintenant, je la partage avec vous et la donne comme référence.

Introduction

Il s'agit d'un plug-in de défilement infini utilisé dans Vue.js, qui peut vous aider à créer rapidement une liste de défilement infinie.

Fonctionnalités

1. Adapté aux appareils mobiles

2. Compatible avec tout élément déroulant

3. Il existe différents spinners qui peuvent être utilisés comme animations de chargement

4. Prend en charge l'affichage des résultats après le chargement

5. Prend en charge deux chargements illimités dans toutes les directions

Installation

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

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 moyens

vue-infinite -loading.js enregistrera une variable globale VueInfiniteLoading, qui doit être utilisée comme ceci :

... components: { VueInfiniteLoading:VueInfiniteLoading.default, } ...

Start

Utilisation de base

Dans cet exemple, nous allons créer une liste infinie de base, avec les trois étapes suivantes :

1. Dans votre modèle , utilisez v-for pour créer une liste

2. et placez le composant InfiniteLoading au bas de la liste

3. Définissez l'attribut ref de ; le composant InfiniteLoading à infiniteLoading, car il est utilisé pour déclencher des événements.

4. Créez et liez une fonction de rappel de chargement au composant InfiniteLoading.

Modèle

Script

import InfiniteLoading from 'vue-infinite-loading'; export default { data() { return { list: [] }; }, methods: { onInfinite() { 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); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); }, 1000); } }, components: { InfiniteLoading } };

Dans la fonctiononInfinite, chaque fois que nous insérons 20 nombres dans le tableau de liste. Nous utilisonssetTimeoutpour simuler des requêtes asynchrones. Enfin, n'oubliez pas de déclencher un événement$InfiniteLoading:loaded, qui indiquera au composantInfiniteLoadingque les données ont été téléchargées avec succès.

Maintenant, nous pouvons afficher l'effet basé sur le code ci-dessus.

Exemple : page de liste Hacker News

Dans cet exemple, nous imiterons une page Hacker News List , mais utiliseraInfiniteLoadingau lieu depagination

Avant de commencer cet exemple, nous devons préparer ce qui suit :

1. API pour obtenir la liste des actualités, dans ce cas, nous utilisons l'API HN Search

2. Importer le plug-in axios pour demander des données

Modèle

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News 
 
  
  
 
   points by  |   
 
   There is no more Hacker News :(   

Dans le modèle, nous créons un en-tête et une liste pour la liste Hacker News. Le composantInfiniteLoadingdans cet exemple est utilisé de manière quelque peu différente de l'exemple précédent. Nous avons personnalisé le contenu de l'invite lorsqu'il n'y a plus de données basées surslot.

Script

import InfiniteLoading from 'vue-infinite-loading'; import axios from 'axios'; const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story'; export default { data() { return { list: [] }; }, methods: { onInfinite() { axios.get(api, { params: { page: this.list.length / 20 + 1 } }).then((res) => { if (res.data.hits.length) { this.list = this.list.concat(res.data.hits); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); if (this.list.length / 20 === 3) { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } } else { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } }); } }, components: { InfiniteLoading } };

Dans la fonctiononInfinitepage d'actualités et placez-les dans le tableau de liste à chaque fois. Si nous demandons 3 pages d'actualités, l'événement$InfiniteLoading:completesera déclenché pour indiquer au composantInfiniteLoadingqu'il n'y a plus de données à charger. Il affichera le contenu de l'invite que nous avons personnalisé dans le modèle pour indiquer qu'il n'y a plus de données.

Style

.hacker-news-list .hacker-news-item { margin: 10px 0; padding: 0 10px 0 32px; line-height: 16px; font-size: 14px; } .hacker-news-list .hacker-news-item .num { margin-top: 1px; margin-left: -32px; float: left; width: 32px; color: #888; text-align: right; } .hacker-news-list .hacker-news-item p { padding-left: 8px; margin: 0; } .hacker-news-list .hacker-news-item .num:after { content: "."; } .hacker-news-list .hacker-news-item p>a { color: #333; padding-right: 5px; } .hacker-news-list .hacker-news-item p a { text-decoration: none; } .hacker-news-list .hacker-news-item p small, .hacker-news-list .hacker-news-item p small a { color: #888; }

sur l'exemple précédent, nous allons créer une sélection déroulante dans l'en-tête comme filtre. Lorsque nous changeons le filtre, la liste se rechargera.

Modèle

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News  Story Poll Show hn Ask hn Front page  
 
  
  
 
   points by  |   
 
   There is no more Hacker News :(   

Script

import InfiniteLoading from 'vue-infinite-loading'; import axios from 'axios'; const api = 'http://hn.algolia.com/api/v1/search_by_date'; export default { data() { return { list: [], tag: 'story' }; }, methods: { onInfinite() { axios.get(api, { params: { tags: this.tag, page: this.list.length / 20 + 1 } }).then((res) => { if (res.data.hits.length) { this.list = this.list.concat(res.data.hits); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); if (this.list.length / 20 === 10) { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } } else { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } }); }, changeFilter() { this.list = []; this.$nextTick(() => { this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset'); }); } }, components: { InfiniteLoading } };

.demo-inner { margin-left: 20px; width: 261px; height: 455px; border: 1px solid #ccc; overflow: auto; } .hacker-news-list .hacker-news-header { padding: 2px; line-height: 14px; background-color: #f60; } .hacker-news-list { min-height: 455px; background-color: #f6f6ef; } .hacker-news-list .hacker-news-header select { float: right; color: #fff; background-color: transparent; border: 1px solid #fff; outline: none; }

Error: window is not defined ReferenceError: window is not defined at ... at ... at e.exports (...) at Object. (...) at p (...) at Object.e.exports.render.e (...) at p (...) at Object. (...) at p (...) at e.__esModule.default (...)

import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';

import InfiniteLoading from 'vue-infinite-loading';

- type Function - reuqired true

- type Number - required false - default 100 - unit pixel

- type String - required false - default 'default'

- type String - required true

- type String - default 'bottom'

onInfinite() { this.$http.get(url, (res) => { if (res.data) { this.list = this.list.concat(res.data); this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:loaded'); } else { this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:complete'); } }); }

 {{ Your content }} 

- type String - default No results :(

- type HTML - default default spinner