Comment gérer la surveillance et le traitement des événements de défilement dans les composants Vue

Comment gérer la surveillance et le traitement des événements de défilement dans les composants Vue

Dans le développement de Vue, nous rencontrons souvent des scénarios qui nécessitent la surveillance et le traitement des événements de défilement, tels que la mise en œuvre du chargement progressif, du défilement infini et d'autres fonctions. Cet article présentera en détail comment gérer la surveillance et le traitement des événements de défilement dans les composants Vue et fournira des exemples de code spécifiques.

1. Écouter les événements de défilement

Il existe deux façons d'écouter les événements de défilement dans les composants Vue : l'une consiste à ajouter un écouteur d'événement et l'autre à utiliser un plug-in tiers.

(1) Ajouter un écouteur d'événement

Dans la fonction hook montée du composant Vue, vous pouvez écouter les événements défilants via la méthode addEventListener. Voici un exemple de code :

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    // 处理滚动事件的代码
  }
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

Dans le code ci-dessus, une fois le rendu du composant terminé, ajoutez un écouteur d'événement de défilement sur l'objet window et liez la fonction de gestionnaire d'événements handleScroll aux méthodes de l'instance Vue actuelle.

Vous devez également supprimer l'écouteur d'événements via la méthode removeEventListener avant que le composant ne soit détruit pour éviter les fuites de mémoire.

(2) Utiliser des plug-ins tiers

En plus d'ajouter manuellement des écouteurs, Vue prend également en charge l'utilisation de plug-ins tiers pour gérer les événements de défilement. Les plug-ins les plus couramment utilisés incluent vue-scroll, vue-infinite-scroll, etc.

Prenons le plug-in vue-infinite-scroll comme exemple. Voici un exemple de code :

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <!-- 内容区域 -->
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll';

export default {
  data() {
    return {
      busy: false
    }
  },
  methods: {
    loadMore() {
      if (!this.busy) {
        // 处理滚动事件的代码
      }
    }
  },
  directives: { InfiniteScroll }
}
</script>

Dans le code ci-dessus, le plug-in vue-infinite-scroll est introduit et la directive v-infinite-scroll est. utilisé dans le composant pour écouter les événements de défilement. Dans le même temps, vous pouvez également utiliser l'attribut infinite-scroll-disabled pour définir s'il faut désactiver le déclenchement des événements de défilement, et l'attribut infinite-scroll-distance pour définir la valeur critique qui déclenche davantage de chargement.

2. Gestion des événements de défilement

Dans le traitement des événements de défilement, une exigence courante est de déterminer si le défilement a atteint le bas et de déclencher les opérations associées. Voici un exemple de code pour gérer le chargement du défilement :

loadMore() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + clientHeight + 10 >= scrollHeight && !this.busy) {
    // 处理滚动加载操作
    this.getData();
  }
},
getData() {
  this.busy = true;

  // 发送请求获取数据
  axios.get('http://example.com/api/data').then(response => {
    // 处理获取的数据
    this.dataList.push(response.data);

    this.busy = false;
  }).catch(error => {
    console.error(error);
    this.busy = false;
  });
}

Dans le code ci-dessus, en obtenant le scrollTop, le clientHeight et le scrollHeight de la zone de défilement, il est déterminé que lorsque le défilement atteint le bas, davantage d'opérations sont déclenchées pour le chargement. Dans la méthode getData, vous pouvez lancer une requête asynchrone pour obtenir des données et ajouter les données à la liste de données existante. Il convient de noter que lors de l'envoi de la requête, l'indicateur occupé doit être défini sur true pour éviter de déclencher l'opération de chargement progressif à plusieurs reprises.

Résumé :

Cet article explique comment gérer la surveillance et le traitement des événements de défilement dans les composants Vue. En ajoutant manuellement des écouteurs d'événements ou en utilisant des plug-ins tiers, vous pouvez surveiller et traiter les événements de défilement. Dans le traitement des événements de défilement, les exigences courantes incluent la détermination que le défilement a atteint le bas et le déclenchement des opérations associées. Ce qui précède est un exemple simple de chargement progressif, que vous pouvez modifier et développer en fonction des besoins réels.

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!