Scroll infini

Le scroll infini comme dans facebook et bien d’autre sites est possible de manière très simple dans VueJs.

Pour se faire, il existe une librairie VueJs : vue-infinite-scroll.

Comment installer

Si vous avez suivi mon tuto sur l’installation d’un environnement de développement complet pour VueJs, vous avez déjà utilisé les packages NPM. Pour installer cette libraire, c’est justement une commande NPM qu’il faut taper :

npm install vue-infinite-scroll --save

Configurer et utiliser

Comme tout package NPM, il faut l’importer dans le fichier principal App.js:

import ....
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll);
...

1. On importe la librairie
2. On l’utilise dans VueJs avec Vue.use…

Il ne reste plus qu’à utiliser la directive v-infinite-scroll-…

Voici comment on l’utilise : imaginons qu’on ait un élément DIV dans lequel on pourrait scroller à l’infini. A chaque scroll, on charge 10 lignes de données supplémentaires via une méthode qu’on appelle à chaque fois pour charger la suite :

Dans App.Vue:

<template>
  <div id="app" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="d in data" :key="d.name">
      {{ d.name }}
    </div>
  </div>
</template>

On peut voir ici qu’on a:

• Un attribut v-infinite-scroll qui indique que lorsqu’on scroll au-delà de la limite des données affichées, on charge la suite via une méthode “loadMore()” -> voir plus bas pour le détail de cette méthode.
• Un autre attribut infinite-scroll-disabled basé sur la variable “busy” qui se trouve dans la partie DATA de notre App.Vue. Ainsi, quand on active la variable busy à true, l’infinite scroll est temporairement arrêté le temps du chargement du reste des données.
• Et encore un autre : infinite-scroll-distance qui indique la distance minimum entre le bas du dernier élément visible et le scroll utilisé par l’utilisateur avant de demander le chargement du reste des données.
• On a ensuite une boucle v-for pour afficher toutes nos données qui sont dans la partie DATA de notre App.Vue (variable nommée aussi “data” sous forme d’un tableau de données).

Voici à quoi ressemble le code de la partie SCRIPT dans App.Vue :

<script>
export default {
  name: 'App',
  data() {
    return {
      busy: false,
      data: []
    }
  },
  methods: {
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          this.data.push({ name: "Test" + i });
        }
        this.busy = false;
      }, 1000);
    }
  }
}
</script>

On peut donc voir ici:

• La partie DATA qui contient bien notre variable BUSY et une données DATA qui n’est rien d’autre qu’un tableau de données pour afficher des données à l’infini remplie par notre fameuse méthode “loadMore”.
• La partie METHODS qui contient notre fameuse méthode “loadMore” pour charger le reste des données : on charge en fait 10 lignes supplémentaires dans notre tableau de données “data” qui est affiché dans la partie HTML via notre boucle v-for. Cette méthode positionne également la variable “busy” à true avant de charger les données pour empêcher l’infinite scroll de demander à nouveau un chargement de données. Ensuite, on charge les données dans un tableau et on repositionne notre variable busy à false. Pour simuler une petite attente d’une seconde, on utilise setTimeout.

Simple et efficace

Comme vous pouvez le voir, vous pouvez donc faire un scroll infini en peu de temps et en peu de lignes de codes. N’hésitez pas à fouiller les librairies existantes et à en tester plusieurs lorsque vous recherchez quelque chose de particulier.

J’espère que cet article vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer, à commenter et aussi à partager cet article.

Je vous dis à très bientôt sur le blog “développement-web-facile.com“.