Un guide complet pour implémenter le chargement par défilement infini avec Vue.js

Alors que la quantité de données continue d'augmenter, le chargement par défilement des pages Web est progressivement devenu une partie importante de l'expérience utilisateur. Dans cet article, nous discuterons d'un guide complet sur la façon d'implémenter le chargement par défilement infini à l'aide de Vue.js.

Qu'est-ce que le chargement par défilement infini ?

Le chargement par défilement infini, également connu sous le nom de défilement infini, est une technique de conception Web utilisée pour ajouter plus de contenu à mesure que l'utilisateur fait défiler vers le bas de la page. Cette technologie est couramment utilisée sur les blogs, les réseaux sociaux, les boutiques en ligne et autres sites Web qui doivent afficher du contenu de manière dynamique.

Le défilement infini est différent de la pagination. Dans la pagination traditionnelle, les utilisateurs doivent tourner les pages pour charger le contenu de la page suivante. En défilement infini, la page chargera automatiquement le contenu de la page suivante, et les utilisateurs pourront continuer à parcourir la liste sans tourner les pages.

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript léger pour créer des interfaces utilisateur. Il a une bonne évolutivité et maintenabilité et est facile à intégrer dans les projets existants. Vue.js fournit de nombreuses fonctionnalités utiles, telles que la liaison de données bidirectionnelle, l'architecture à composants et le DOM virtuel, rendant le développement d'applications Web plus rapide et plus facile.

Maintenant, nous commençons à explorer comment utiliser Vue.js pour obtenir un chargement de défilement infini.

Étape 1 : Préparer le projet

Tout d'abord, nous devons configurer le projet Vue.js via Node.js et npm. Ensuite, créez un composant Vue.js pour afficher nos éléments de liste.

Installez Vue.js et préparez le projet :

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

Créer un composant :

Vous pouvez utiliser la commande suivante pour créer un composant : #🎜 🎜#

vue generate component List

Étape 2 : implémenter le défilement infini

Voici la partie la plus importante : comment obtenir un défilement infini.

Supposons que nous ayons une API qui nécessite une pagination et qu'elle renvoie une page de données et l'adresse URL de la page suivante.

Pour obtenir un défilement infini, nous devons charger la page de données suivante jusqu'à ce qu'il n'y ait plus de données disponibles ou que l'utilisateur arrête de faire défiler la page. Nous pouvons utiliser l'API watch de Vue.js pour écouter les événements de défilement et déclencher un événement pour charger la page suivante lors du défilement vers le bas de la page.

watch API来监听滚动事件，并在滚动到页面底部时触发加载下一页的事件。

在我们之前创建的组件中，添加如下代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1"
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      const response = await fetch(this.nextUrl);
      const data = await response.json();
      this.items = [...this.items, ...data.items];
      this.nextUrl = data.nextUrl;
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

我们首先定义了两个数据项：items和nextUrl，items用来存储已经加载的列表项，nextUrl则用来存储下一页的URL地址。

在mounted生命周期钩子中，我们绑定了handleScroll方法到滚动事件中。

我们使用watch API监听了路由变化事件，这里是为了在组件被重用时重新绑定滚动事件。

loadMore方法用来加载下一页的数据。我们使用fetch API来获取数据并将其加入到items数组中。handleScroll方法用于检查滚动事件，当页面滚动到底部时，调用loadMore方法加载下一页的数据。

最后，我们在组件销毁的时候解除对滚动事件的监听。

现在，我们已经完成了无限滚动的实现。每当用户滚动到页面底部时，下一页的数据就会自动加载。

步骤三：加入加载提示和错误提示

更好的用户体验通常需要在列表末尾加入一个加载提示，同时在出现错误时也需要显示一个错误提示。

在之前的组件中添加如下代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="isLoading">Loading...</div>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      nextUrl: "https://api.example.com/page1",
      isLoading: false,
      errorMessage: null
    };
  },
  watch: {
    $route(to, from) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    async loadMore() {
      try {
        this.isLoading = true;
        const response = await fetch(this.nextUrl);
        const data = await response.json();
        this.items = [...this.items, ...data.items];
        this.nextUrl = data.nextUrl;
      } catch (error) {
        this.errorMessage = "Something went wrong." + error.message;
      } finally {
        this.isLoading = false;
      }
    },
    handleScroll() {
      if (
        window.innerHeight + window.pageYOffset >=
        document.body.offsetHeight
      ) {
        this.loadMore();
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

我们添加了isLoading和errorMessage两个数据项，分别用于显示加载提示和错误提示。在loadMore方法中，我们添加了try-catch块来捕获数据加载时可能出现的错误，并在最后finally块中关闭加载提示。在errorMessageDans le composant que nous avons créé précédemment, ajoutez le code suivant :

rrreee

Nous définissons d'abord deux éléments de données : items et nextUrl, <code>items sont utilisés pour stocker les éléments de liste chargés, et nextUrl est utilisé pour stocker l'adresse URL de la page suivante.

Dans le hook de cycle de vie Mounted, nous lions la méthode handleScroll à l'événement scroll.

Nous utilisons l'API watch pour écouter les événements de changement d'itinéraire, ici pour relier l'événement de défilement lorsque le composant est réutilisé.

La méthode loadMore permet de charger les données de la page suivante. Nous utilisons l'API fetch pour obtenir les données et les ajouter au tableau items. La méthode handleScroll est utilisée pour vérifier l'événement scroll Lorsque la page défile vers le bas, la méthode loadMore est appelée pour charger les données de la page suivante.

Enfin, nous libérons la surveillance des événements de défilement lorsque le composant est détruit.

#🎜🎜#Maintenant, nous avons terminé la mise en œuvre du défilement infini. Chaque fois que l'utilisateur fait défiler vers le bas de la page, les données de la page suivante se chargent automatiquement. #🎜🎜##🎜🎜#Étape 3 : Ajouter des invites de chargement et des invites d'erreur#🎜🎜##🎜🎜#Une meilleure expérience utilisateur nécessite généralement l'ajout d'une invite de chargement à la fin de la liste, et doit également afficher une erreur lorsque une erreur se produit. #🎜🎜##🎜🎜#Ajoutez le code suivant au composant précédent : #🎜🎜#rrreee#🎜🎜#Nous avons ajouté deux éléments de données : isLoading et errorMessage , utilisé pour afficher respectivement les invites de chargement et les invites d'erreur. Dans la méthode loadMore, nous ajoutons un bloc try-catch pour détecter les erreurs qui peuvent survenir lors du chargement des données et fermons l'invite de chargement dans le bloc final. Afficher les informations d'erreur dans errorMessage. #🎜🎜##🎜🎜#Maintenant, nous avons complété une liste déroulante infinie avec des invites de chargement et des invites d'erreur. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Dans cet article, nous avons appris à utiliser Vue.js pour implémenter une liste de chargement à défilement infini. Nous avons découvert des technologies importantes telles que la surveillance des événements de défilement, le chargement dynamique des données, le chargement de l'affichage et les invites d'erreur. #🎜🎜##🎜🎜#Lors de la mise en œuvre du défilement infini, nous devons faire attention à ne pas charger trop de données à la fois, ce qui entraînerait une dégradation des performances. Nous devons également fournir aux utilisateurs des invites de chargement et des invites d'erreur appropriées pour améliorer l'expérience utilisateur. #🎜🎜##🎜🎜#Bien sûr, ceci n'est qu'un simple exemple. Vue.js fournit plus de fonctions et d'API, nous permettant de créer des composants et des applications plus complexes. J'espère que cet article pourra vous être utile. #🎜🎜#

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!