instructions d'utilisation de vue-infinite-loading2.0
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
Adapté aux appareils mobiles
Compatible avec tout élément déroulant
Il existe différents spinners qui peuvent être utilisés comme animations de chargement
Prend en charge l'affichage des résultats après le chargement
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 de module ES6
import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, };
Méthode d'importation de module CommonJS
const InfiniteLoading = require('vue-infinite-loading'); export default { components: { InfiniteLoading, }, };
Autres méthodes
<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>
vue -infinite-loading.js enregistrera une variable globale VueInfiniteLoading, qui doit être utilisée comme ceci :
... components: { VueInfiniteLoading:VueInfiniteLoading.default, } ...
Démarrer
Utilisation de base
Dans cet exemple, nous allons créer une liste infinie de base, avec les trois étapes suivantes :
Dans votre modèle, utilisez v-for pour créer une liste
Placez le composant InfiniteLoading en bas de la liste
Définissez l'attribut ref du composant InfiniteLoading sur infiniteLoading car il est utilisé pour déclencher l'événement.
Créez et liez une fonction de rappel de chargement au composant InfiniteLoading.
Modèle
<template> <p> <p v-for="item in list"> Line: <span v-text="item"></span> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> </infinite-loading> </p> </template>
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 } };
ononInfinite< ; /strong>Dans la fonction, chaque fois que nous insérons 20 nombres dans le tableau de liste. Nous utilisons setTimeout pour simuler des requêtes asynchrones. Enfin, n'oubliez pas de déclencher un événement $InfiniteLoading:loaded, qui indiquera au composant InfiniteLoading 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.
Exemple : page de liste Hacker News
Dans cet exemple, nous imiterons une page Hacker News List , mais utilisera InfiniteLoading au lieu de pagination
Avant de commencer cet exemple, nous devons préparer ce qui suit :
API pour obtenir la liste des actualités, dans ce cas, nous utilisons l'API HN Search
Importer le plug-in axios pour demander des données
Modèle
<p class="hacker-news-list"> <p class="hacker-news-header"> <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >  </a> <span>Hacker News</span> </p> <p class="hacker-news-item" v-for="(item, key) in list"> <span class="num" v-text="key + 1"></span> <p> <a target="_blank" :href="item.url" rel="external nofollow" rel="external nofollow" v-text="item.title"></a> </p> <p> <small> <span v-text="item.points"></span> points by <a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author" rel="external nofollow" rel="external nofollow" v-text="item.author"></a> | <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow" v-text="item.num_comments + ' comments'"></a> </small> </p> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <span slot="no-more"> There is no more Hacker News :( </span> </infinite-loading> </p>
Dans le modèle, nous créons un en-tête et une liste pour la liste Hacker News. Le composant InfiniteLoading 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 slot.
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 fonction onInfinite tableau. Si nous demandons 3 pages d'actualités, l'événement $InfiniteLoading:complete sera déclenché pour indiquer au composant InfiniteLoading 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>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; }
Utiliser avec filtre
在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。
Template
<p class="hacker-news-list"> <p class="hacker-news-header"> <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >  </a> <span>Hacker News</span> <select v-model="tag" @change="changeFilter()"> <option value="story">Story</option> <option value="poll">Poll</option> <option value="show_hn">Show hn</option> <option value="ask_hn">Ask hn</option> <option value="front_page">Front page</option> </select> </p> <p class="hacker-news-item" v-for="(item, key) in list"> <span class="num" v-text="key + 1"></span> <p> <a target="_blank" :href="item.url" rel="external nofollow" rel="external nofollow" v-text="item.title"></a> </p> <p> <small> <span v-text="item.points"></span> points by <a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author" rel="external nofollow" rel="external nofollow" v-text="item.author"></a> | <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow" v-text="item.num_comments + ' comments'"></a> </small> </p> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <span slot="no-more"> There is no more Hacker News :( </span> </infinite-loading> </p>
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 } };
在changeFilter函数中,我们清楚了列表并等待DOM更新,然后我们触发一个$InfiniteLoading:reset事件,目的是让 InfiniteLoading 组件回到最初状态,它将立刻请求新的数据。
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; }
服务端渲染
服务端渲染(SSR)是Vue.js2.0的新特性,当你在你的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 (...)
因为style-loader不支持在这个时候本地导出,详情点这里,所以我们需要下面的变通方案,为了你的SSR应用:
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
代替
import InfiniteLoading from 'vue-infinite-loading';
npm install less less-loader --save-dev 如果你还没有安装它们。
然后你的SSR应用应该运行良好。如果不是,你可以加入这个issue去讨论。
属性
on-infinite
这是一个回调函数,当滚动到距离滚动父元素底部特定距离的时候,会被调用。
通常,在数据加载完成后,你应该在这个函数中发送$InfiniteLoading:loaded事件。
- type Function - reuqired true
distance
这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么on-infinite回调函数就会被调用。
- type Number - required false - default 100 - unit pixel
spinner
通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。
- type String - required false - default 'default'
ref
正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到 InfiniteLoading 组件的实例来发送事件。你可以用这种方式来得到实例:this.$refs[the value of ref attribute].
- type String - required true
direction
如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用on-infinite函数。
警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用on-infinite函数。
- type String - default 'bottom'
事件
InfiniteLoading 组件将处理一下事件。如果你需要通过组件的实例来$emit,则可以通过ref属性来得到组件实例。
$InfiniteLoading:loaded
通常,你需要在数据加载后发送这个事件, InfiniteLoading组件将隐藏加载动画,并且准备下一次触发。
$InfiniteLoading:complete
如果InfiniteLoading组件就不会接收$InfiniteLoading:loaded,当你发送这个事件后,它将为用户显示一个没有结果的提示。如果InfiniteLoading组件接收过$InfiniteLoading:loaded,当你发送这个事件的时候,它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。
你的onInfinite函数可能像这个样子:
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'); } }); }
$InfiniteLoading:reset
InfiniteLoading组件将会回到最初的状态,并且on-infinite函数将会立刻被调用。大部分情况下,如果你把这个组件同过滤器或制表符一起使用,这个事件还是有用的。
插槽
你可以利用slot自定义提示的内容,当然,如果你喜欢的话,也可以使用默认内容:
<span slot="{{ slot name }}"> {{ Your content }} </span>
no-results
当InfiniteLoading组件接收到$InfiniteLoading:complete 事件并且它没有接收过$InfiniteLoading:loaded事件时,这个内容会显示出来。
- type String - default No results :(
no-more
当InfiniteLoading组件接收到$InfiniteLoading:complete 事件并且它已经接收过$InfiniteLoading:loaded事件时,这个内容会出现。
spinner
如果,你不喜欢当前旋转器,你可以自定义自己的旋转器作为加载时的动画。
- type HTML - default default spinner
旋转器
你可以用spinner属性,选择你最喜爱的旋转器作为加载动画:
<infinite-loading spinner="{{ spinner name }}"></infinite-loading>
点击这里可以查看几个可用的旋转器。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

1. Basculez entre le mode de réduction du bruit et le mode transparence. Appuyez et maintenez la poignée des écouteurs pendant environ 1 seconde pour basculer entre le mode de réduction du bruit et le mode transparence. 2. En mode musique, appuyez une fois sur la poignée des écouteurs pour mettre en pause ou écouter de la musique. Appuyez deux fois sur la poignée des écouteurs pour lire la chanson suivante. Appuyez trois fois sur la poignée des écouteurs pour lire la chanson précédente ou réveiller la voix. 3. En mode appel, pendant un appel, appuyez une fois sur la poignée des écouteurs pour répondre ou raccrocher l'appel. 4. Comment réinitialiser Ouvrez le boîtier des écouteurs. Lorsque le voyant du boîtier de chargement clignote en rouge 5 fois, relâchez le bouton et les écouteurs sont réinitialisés. 3. Comment connecter le téléphone 1. Ouvrez le boîtier de chargement 2. Appuyez et maintenez enfoncé le bouton de réglage pendant 2 secondes 3. Lorsqu'une fenêtre contextuelle apparaît sur l'écran du téléphone, cliquez pour confirmer la connexion. 4. Comment vérifier l'état de la batterie 1. Lorsque les écouteurs sont connectés au téléphone mobile, vous pouvez vérifier le niveau de la batterie des écouteurs et du boîtier de chargement dans la fenêtre contextuelle de l'écran du téléphone mobile. 2,

Instructions pour accéder et utiliser la fonction de paiement d'UniApp Avec la popularité du paiement mobile, de nombreuses applications doivent intégrer des fonctions de paiement pour faciliter aux utilisateurs d'effectuer des paiements en ligne. En tant que cadre de développement multiplateforme basé sur Vue.js, UniApp présente les caractéristiques d'un développement unique et d'une utilisation multiplateforme, et peut facilement implémenter l'accès aux fonctions de paiement. Cet article expliquera comment accéder à la fonction de paiement dans UniApp et donnera des exemples de code. 1. Pour accéder à la fonction de paiement, ajoutez les autorisations de paiement dans le fichier manifest.json côté application :

Comment utiliser le framework Hyperf pour le traitement multilingue Introduction : Avec la mondialisation d'Internet, le traitement multilingue est devenu une compétence essentielle pour le développement de nombreuses applications. Dans le développement d’applications Web, il est très important de pouvoir prendre en charge plusieurs langues car cela peut vous aider à mieux répondre aux besoins des différents utilisateurs. Cet article explique comment utiliser le framework Hyperf pour le traitement multilingue et fournit des exemples de code spécifiques. Installer le framework Hyperf Tout d'abord, nous devons installer le framework Hyperf. Vous pouvez utiliser la commande composer pour

Comment utiliser la fonction d'enregistrement vidéo dans uniapp Aujourd'hui, l'auteur vous présentera comment utiliser la fonction d'enregistrement vidéo dans le framework de développement uniapp. uniapp est un framework de développement multiplateforme. Nous pouvons exécuter nos applications sur plusieurs plateformes en même temps sur la base du code écrit une seule fois, ce qui est très pratique pour les développeurs. Dans uniapp, nous pouvons utiliser le composant caméra uni-AD-IN pour implémenter la fonction d'enregistrement vidéo. Tout d’abord, nous devons installer uni-

Comment filtrer les données à l'aide du filtrage avancé Dans le travail quotidien, filtrer de grandes quantités de données est une tâche très courante et importante. La fonction de filtrage conventionnelle peut ne pas être en mesure de répondre aux besoins d'un filtrage plus précis et plus complexe des données. Pour résoudre ce problème, de nombreux logiciels bureautiques proposent des fonctions de filtrage avancées qui peuvent aider les utilisateurs à filtrer les données plus efficacement. Cet article explique comment utiliser les fonctionnalités de filtrage avancées pour filtrer les données. Étape 1 : Préparer les données Avant d'utiliser la fonction de filtrage avancé, vous devez d'abord préparer les données à filtrer. Assurez-vous que les données sont complètes

Les cookies sont une technologie Web courante utilisée pour stocker des informations sur les préférences personnelles et le comportement des utilisateurs sur les sites Web. À l'ère numérique d'aujourd'hui, presque tous les sites Web utilisent des cookies pour offrir une personnalisation et une meilleure expérience utilisateur. Cet article présentera en détail l'utilisation des cookies pour aider les utilisateurs à mieux comprendre et maîtriser cette technologie. Tout d’abord, comprenons le concept de base des cookies. Les cookies sont de petits fichiers texte stockés sur le navigateur de l'utilisateur par le site Internet et contiennent des informations sur la visite de l'utilisateur sur le site Internet.

Comment utiliser l'application Zizai Zhao ? Ce logiciel aide non seulement les utilisateurs à retrouver rapidement les objets perdus, mais dispose également d'une fonction de rappel intelligent dédiée qui vous permet de tout emporter rapidement avec vous. Nous devrions utiliser un logiciel aussi facile à utiliser. Pour les utilisateurs qui viennent de le télécharger, comment faire fonctionner ce logiciel si l'on veut récupérer rapidement les choses ? Jetons un coup d'œil à la méthode de fonctionnement de ce logiciel. J'espère qu'il pourra vous aider efficacement à récupérer rapidement les marchandises. Tutoriel sur la façon d'utiliser le logiciel de l'application Zizai Zhao 1. Téléchargez le logiciel de l'application Nut Zizai Zhao fourni par ce site, tournez-le. sur Bluetooth, et votre téléphone mobile doit le prendre en charge Bluetooth 4.0 2. Ouvrez le logiciel et enregistrez un nouvel utilisateur. Vous pouvez choisir de vous inscrire via votre téléphone mobile ou de vous connecter via Weibo ou QQ. 3. Volonté

Le système Win7, comme les autres systèmes Windows, doit être activé pour utiliser toutes les fonctions. Alors comment activer win7 ? La méthode couramment utilisée consiste à utiliser le code d'activation win7 ou l'outil d'activation win7, et le plus simple à utiliser est l'outil d'activation win7activation. L'éditeur ci-dessous vous présentera comment utiliser l'outil d'activation win7activation. La méthode spécifique est la suivante : 1. Téléchargez d'abord « WIN7Activation » (outil d'activation Win7) en ligne, copiez le programme sur votre ordinateur et double-cliquez dessus pour l'ouvrir. 2. Cliquez ensuite directement : Activer, et l'état d'activation commencera automatiquement. 3. Une fois que le programme a activé le système win7, une invite apparaît, cliquez sur : Oui. 4. Redémarrez
