Maison interface Web js tutoriel instructions d'utilisation de vue-infinite-loading2.0

instructions d'utilisation de vue-infinite-loading2.0

May 02, 2018 am 09:41 AM
使用说明

Cette fois, je vous apporte les instructions d'utilisation de vue-infinite-loading2.0. Quelles sont les précautions lors de l'utilisation de vue-infinite-loading2.0. Voici des cas réels, jetons un coup d'œil.

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

<p id="installation">Installation</p>

<strong>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</strong>

npm install vue-infinite-loading --save
Copier après la connexion

Méthode d'importation

Méthode d'importation de module ES6

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

Méthode d'importation de module CommonJS

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

Autres méthodes

&lt;script src=&quot;/path/to/vue-infinite-loading/dist/vue-infinite-loading.js&quot;&gt;&lt;/script&gt;
Copier après la connexion

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

 ...
 components: {
   VueInfiniteLoading:VueInfiniteLoading.default,
 }
...
Copier après la connexion

Démarrer

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. Placez le composant InfiniteLoading en bas de la liste

  3. Définissez l'attribut ref du composant InfiniteLoading sur infiniteLoading car il est utilisé pour déclencher l'événement.

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

Modèle

&lt;template&gt;
 &lt;p&gt;
  &lt;p v-for=&quot;item in list&quot;&gt;
  Line:
  &lt;span v-text=&quot;item&quot;&gt;&lt;/span&gt;
  &lt;/p&gt;
  &lt;infinite-loading :on-infinite=&quot;onInfinite&quot; ref=&quot;infiniteLoading&quot;&gt;  &lt;/infinite-loading&gt;
 &lt;/p&gt;
&lt;/template&gt;
Copier après la connexion

Script

import InfiniteLoading from 'vue-infinite-loading';
export default {
 data() {
  return {
   list: []
  };
 },
 methods: {
  onInfinite() {
   setTimeout(() =&gt; {
    const temp = [];
    for (let i = this.list.length + 1; i &lt;= this.list.length + 20; i++) {
     temp.push(i);
    }
    this.list = this.list.concat(temp);
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
   }, 1000);
  }
 },
 components: {
  InfiniteLoading
 }
};
Copier après la connexion

on<strong>onInfinite&lt ; /strong>Dans la fonction, chaque fois que nous insérons 20 nombres dans le tableau de liste. Nous utilisons <strong>setTimeout</strong> pour simuler des requêtes asynchrones. Enfin, n'oubliez pas de déclencher un événement <strong>$InfiniteLoading:loaded</strong>, qui indiquera au composant <strong>InfiniteLoading</strong> que les données ont été téléchargées avec succès.

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

<p id="hacker">Exemple : page de liste Hacker News</p>

Dans cet exemple, nous imiterons une page Hacker News List , mais utilisera <strong>InfiniteLoading</strong> au lieu de <strong>pagination</strong>

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

&lt;p class=&quot;hacker-news-list&quot;&gt;
 &lt;p class=&quot;hacker-news-header&quot;&gt;
  &lt;a target=&quot;_blank&quot; href=&quot;http://www.ycombinator.com/&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;
   ![](https://news.ycombinator.com/y18.gif)
  &lt;/a&gt;
  &lt;span&gt;Hacker News&lt;/span&gt;
&lt;/p&gt;
&lt;p class=&quot;hacker-news-item&quot; v-for=&quot;(item, key) in list&quot;&gt;
 &lt;span class=&quot;num&quot; v-text=&quot;key + 1&quot;&gt;&lt;/span&gt;
 &lt;p&gt;
  &lt;a target=&quot;_blank&quot; :href=&quot;item.url&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; v-text=&quot;item.title&quot;&gt;&lt;/a&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;small&gt;
   &lt;span v-text=&quot;item.points&quot;&gt;&lt;/span&gt;
   points by
   &lt;a target=&quot;_blank&quot; :href=&quot;&#39;https://news.ycombinator.com/user?id=&#39; + item.author&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; 
    v-text=&quot;item.author&quot;&gt;&lt;/a&gt;
    |
   &lt;a target=&quot;_blank&quot; :href=&quot;&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; 
    v-text=&quot;item.num_comments + &#39; comments&#39;&quot;&gt;&lt;/a&gt;
  &lt;/small&gt;
 &lt;/p&gt;
&lt;/p&gt;
 &lt;infinite-loading :on-infinite=&quot;onInfinite&quot; ref=&quot;infiniteLoading&quot;&gt;
 &lt;span slot=&quot;no-more&quot;&gt;
  There is no more Hacker News :(
 &lt;/span&gt;
 &lt;/infinite-loading&gt;
&lt;/p&gt;
Copier après la connexion

Dans le modèle, nous créons un en-tête et une liste pour la liste Hacker News. Le composant <strong>InfiniteLoading</strong> dans 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 sur <strong>slot</strong>.

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) =&gt; {
    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
 }
};
Copier après la connexion

Dans la fonction <strong>onInfinite</strong> tableau. Si nous demandons 3 pages d'actualités, l'événement <strong>$InfiniteLoading:complete</strong> sera déclenché pour indiquer au composant <strong>InfiniteLoading</strong> qu'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&gt;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;
}
Copier après la connexion

<p id="use">Utiliser avec filtre</p>

在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。

Template

&lt;p class=&quot;hacker-news-list&quot;&gt;
&lt;p class=&quot;hacker-news-header&quot;&gt;
 &lt;a target=&quot;_blank&quot; href=&quot;http://www.ycombinator.com/&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;
  ![](https://news.ycombinator.com/y18.gif)
 &lt;/a&gt;
 &lt;span&gt;Hacker News&lt;/span&gt;
 &lt;select v-model=&quot;tag&quot; @change=&quot;changeFilter()&quot;&gt;
  &lt;option value=&quot;story&quot;&gt;Story&lt;/option&gt;
  &lt;option value=&quot;poll&quot;&gt;Poll&lt;/option&gt;
  &lt;option value=&quot;show_hn&quot;&gt;Show hn&lt;/option&gt;
  &lt;option value=&quot;ask_hn&quot;&gt;Ask hn&lt;/option&gt;
  &lt;option value=&quot;front_page&quot;&gt;Front page&lt;/option&gt;
 &lt;/select&gt;
&lt;/p&gt;
&lt;p class=&quot;hacker-news-item&quot; v-for=&quot;(item, key) in list&quot;&gt;
 &lt;span class=&quot;num&quot; v-text=&quot;key + 1&quot;&gt;&lt;/span&gt;
 &lt;p&gt;
  &lt;a target=&quot;_blank&quot; :href=&quot;item.url&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; v-text=&quot;item.title&quot;&gt;&lt;/a&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;small&gt;
   &lt;span v-text=&quot;item.points&quot;&gt;&lt;/span&gt;
   points by
   &lt;a target=&quot;_blank&quot; :href=&quot;&#39;https://news.ycombinator.com/user?id=&#39; + item.author&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; 
     v-text=&quot;item.author&quot;&gt;&lt;/a&gt;
   |
   &lt;a target=&quot;_blank&quot; :href=&quot;&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; 
     v-text=&quot;item.num_comments + &#39; comments&#39;&quot;&gt;&lt;/a&gt;
  &lt;/small&gt;
 &lt;/p&gt;
&lt;/p&gt;
&lt;infinite-loading :on-infinite=&quot;onInfinite&quot; ref=&quot;infiniteLoading&quot;&gt;
 &lt;span slot=&quot;no-more&quot;&gt;
  There is no more Hacker News :(
 &lt;/span&gt;
&lt;/infinite-loading&gt;
&lt;/p&gt;
Copier après la connexion

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) =&gt; {
    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(() =&gt; {
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
   });
  }
 },
 components: {
  InfiniteLoading
 }
};
Copier après la connexion

在<strong>changeFilter</strong>函数中,我们清楚了列表并等待DOM更新,然后我们触发一个<strong>$InfiniteLoading:reset</strong>事件,目的是让<strong> InfiniteLoading </strong>组件回到最初状态,它将立刻请求新的数据。

Style

在上个例子基础上增加样式

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

<p id="server">服务端渲染</p>

服务端渲染(SSR)是<strong>Vue.js2.0</strong>的新特性,当你在你的SSR应用中使用这个组件,会得到类似这样的错误:

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

因为<strong>style-loader</strong>不支持在这个时候本地导出,详情点这里,所以我们需要下面的变通方案,为了你的SSR应用:

import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
Copier après la connexion

代替

 import InfiniteLoading from 'vue-infinite-loading';
Copier après la connexion

<strong>npm install less less-loader --save-dev</strong> 如果你还没有安装它们。

然后你的SSR应用应该运行良好。如果不是,你可以加入这个issue去讨论。

<p id="properties">属性<p>

on-infinite

这是一个回调函数,当滚动到距离滚动父元素底部特定距离的时候,会被调用。

通常,在数据加载完成后,你应该在这个函数中发送<strong>$InfiniteLoading:loaded</strong>事件。

- type      Function
- reuqired    true
Copier après la connexion

distance

这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么<strong>on-infinite</strong>回调函数就会被调用。

- type     Number
- required   false
- default   100
- unit     pixel
Copier après la connexion

spinner

通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。

- type     String
- required   false
- default   'default'
Copier après la connexion

ref

正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到<strong> InfiniteLoading </strong>组件的实例来发送事件。你可以用这种方式来得到实例:<strong>this.$refs[the value of ref attribute].</strong>

- type   String
- required   true
Copier après la connexion

direction

如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用on-infinite函数。

<strong>警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用on-infinite函数。</strong>

- type     String
- default   'bottom'
Copier après la connexion

<p id="event">事件</p>

<strong>InfiniteLoading </strong>组件将处理一下事件。如果你需要通过组件的实例来<strong>$emit</strong>,则可以通过<strong>ref</strong>属性来得到组件实例。

$InfiniteLoading:loaded

通常,你需要在数据加载后发送这个事件,<strong> InfiniteLoading</strong>组件将隐藏加载动画,并且准备下一次触发。

$InfiniteLoading:complete

如果<strong>InfiniteLoading</strong>组件就不会接收<strong>$InfiniteLoading:loaded</strong>,当你发送这个事件后,它将为用户显示一个没有结果的提示。如果<strong>InfiniteLoading</strong>组件接收过<strong>$InfiniteLoading:loaded</strong>,当你发送这个事件的时候,它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。

你的<strong>onInfinite</strong>函数可能像这个样子:

onInfinite() {
  this.$http.get(url, (res) =&gt; {
  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');
  }
 });
}
Copier après la connexion

$InfiniteLoading:reset

<strong>InfiniteLoading</strong>组件将会回到最初的状态,并且<strong>on-infinite</strong>函数将会立刻被调用。大部分情况下,如果你把这个组件同过滤器或制表符一起使用,这个事件还是有用的。

<p id="slots">插槽</p>

你可以利用<strong>slot</strong>自定义提示的内容,当然,如果你喜欢的话,也可以使用默认内容:

 &lt;span slot=&quot;{{ slot name }}&quot;&gt;
  {{ Your content }}
 &lt;/span&gt;
Copier après la connexion

no-results

当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它没有接收过<strong>$InfiniteLoading:loaded</strong>事件时,这个内容会显示出来。

- type    String
- default   No results :(
Copier après la connexion

no-more

当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它已经接收过<strong>$InfiniteLoading:loaded</strong>事件时,这个内容会出现。

spinner

如果,你不喜欢当前旋转器,你可以自定义自己的旋转器作为加载时的动画。

- type     HTML
- default   default spinner
Copier après la connexion

<p id="spinners">旋转器</p>

你可以用<strong>spinner</strong>属性,选择你最喜爱的旋转器作为加载动画:

&lt;infinite-loading spinner=&quot;{{ spinner name }}&quot;&gt;&lt;/infinite-loading&gt;
Copier après la connexion

点击这里可以查看几个可用的旋转器。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue组件与复用使用详解

Vue无限加载vue-infinite-loading使用详解

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!

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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les instructions OnePlus budsPro_OnePlus budsPro Comment utiliser les instructions OnePlus budsPro_OnePlus budsPro Mar 23, 2024 am 10:11 AM

Comment utiliser les instructions OnePlus budsPro_OnePlus budsPro

Instructions pour accéder et utiliser la fonction de paiement d'UniApp Instructions pour accéder et utiliser la fonction de paiement d'UniApp Jul 04, 2023 am 10:27 AM

Instructions pour accéder et utiliser la fonction de paiement d'UniApp

Comment utiliser le framework Hyperf pour le traitement multilingue Comment utiliser le framework Hyperf pour le traitement multilingue Oct 20, 2023 am 11:10 AM

Comment utiliser le framework Hyperf pour le traitement multilingue

Comment utiliser la fonction d'enregistrement vidéo dans Uniapp Comment utiliser la fonction d'enregistrement vidéo dans Uniapp Jul 06, 2023 pm 06:51 PM

Comment utiliser la fonction d'enregistrement vidéo dans Uniapp

Instructions détaillées pour l'utilisation des cookies Instructions détaillées pour l'utilisation des cookies Feb 22, 2024 pm 12:21 PM

Instructions détaillées pour l'utilisation des cookies

Filtrer les données avec des options de filtrage avancées Filtrer les données avec des options de filtrage avancées Feb 18, 2024 pm 02:11 PM

Filtrer les données avec des options de filtrage avancées

Comment utiliser l'outil d'activation win7activation Comment utiliser l'outil d'activation win7activation Jul 17, 2023 pm 08:37 PM

Comment utiliser l'outil d'activation win7activation

Comprendre l'utilisation des types de référence JavaScript Comprendre l'utilisation des types de référence JavaScript Jun 15, 2023 pm 01:44 PM

Comprendre l'utilisation des types de référence JavaScript

See all articles