Comment utiliser v-on:scroll pour écouter les événements de défilement dans Vue

Vue est actuellement l'un des frameworks frontaux les plus populaires. En plus de la surveillance des événements courants, Vue fournit également une instruction pour surveiller les événements de défilement, à savoir v-on:scroll. Cet article présentera en détail comment utiliser v-on:scroll pour écouter les événements de défilement dans Vue.

1. Utilisation de base de l'instruction v-on:scroll

L'instruction v-on:scroll est utilisée pour surveiller les événements de défilement des éléments DOM. Son utilisation de base est la suivante :

<div v-on:scroll="scrollHandler"></div>

Parmi eux, scrollHandler est une coutume. fonction de traitement des événements de défilement.

2. Utilisez v-on:scroll pour surveiller l'événement de défilement de l'objet fenêtre

Si vous souhaitez surveiller l'événement de défilement de la fenêtre du navigateur, vous devez lier l'instruction v-on:scroll à l'objet fenêtre. Le code est le suivant :

<template>
  <div>
    <p>当前滚动位置：{{ scrollTop }}</p>
    <div style="height: 2000px;" v-on:scroll="windowScroll"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    windowScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    },
  },
};
</script>

In Dans le code ci-dessus, nous utilisons une variable scrollTop pour enregistrer la position de défilement actuelle, puis lions l'instruction v-on:scroll à un élément div avec une hauteur fixe afin qu'il puisse être défilé. Dans la fonction de gestion des événements de défilement windowScroll, nous obtenons la position de défilement actuelle via document.documentElement.scrollTop || et l'attribuons à la variable scrollTop. De cette façon, chaque fois que la fenêtre défile, la méthode windowScroll sera déclenchée et la position de défilement actuelle sera mise à jour.

3. Utilisez v-on:scroll pour écouter l'événement de défilement du composant

Si vous souhaitez écouter l'événement de défilement dans le composant Vue, vous pouvez lier l'instruction v-on:scroll à l'élément racine de le composant et dans le composant Ajoutez la fonction de traitement de défilement correspondante.

<template>
  <div style="height: 200px; overflow-y: scroll;" v-on:scroll="scrollHandler">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["item1", "item2", "item3", "item4", "item5"],
    };
  },
  methods: {
    scrollHandler(event) {
      console.log(event.target.scrollTop);
    },
  },
};
</script>

Dans le code ci-dessus, nous utilisons un élément div avec une hauteur fixe et une zone de défilement, puis lions la directive v-on:scroll à l'élément afin qu'il puisse écouter les événements de défilement. Dans la fonction de traitement des événements de défilement scrollHandler, nous pouvons obtenir la position de défilement actuelle via event.target.scrollTop.

4. Utilisez la fonction anti-rebond pour optimiser le traitement des événements de défilement

Dans le développement réel, nous devrons peut-être effectuer certaines opérations complexes dans la fonction de traitement des événements de défilement, telles que la mise à jour du contenu de la page, le chargement de plus de données, etc. -consommer. S'il est exécuté directement sur chaque parchemin, cela peut entraîner des retards dans la page. Afin d'éviter cette situation, nous pouvons utiliser la fonction anti-rebond pour optimiser la fonction de gestion des événements de défilement.

La fonction anti-rebond est une méthode de limitation de fonction couramment utilisée. Elle permet à une fonction d'être exécutée une seule fois au cours d'une certaine période de temps, réduisant ainsi la quantité de calculs sur la page. Nous pouvons l'utiliser pour optimiser les événements de défilement.

<template>
  <div style="height: 200px; overflow-y: scroll;" v-on:scroll="scrollHandlerWithDebounce">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { debounce } from "lodash";

export default {
  data() {
    return {
      list: ["item1", "item2", "item3", "item4", "item5"],
    };
  },
  methods: {
    scrollHandler() {
      console.log(event.target.scrollTop);
    },
    scrollHandlerWithDebounce: debounce(function (event) {
      this.scrollHandler(event);
    }, 300),
  },
};
</script>

Dans le code ci-dessus, nous utilisons la fonction anti-rebond fournie par la bibliothèque lodash, enveloppons la fonction du gestionnaire d'événements de défilement scrollHandler comme scrollHandlerWithDebounce, appelons scrollHandler dans cette fonction et définissons le temps anti-secousse sur 300 ms, de sorte que l'événement de défilement la fonction de gestionnaire est en 300 ms Exécutée une seule fois au maximum.

Résumé

L'utilisation de la directive v-on:scroll peut facilement surveiller les événements de défilement des éléments DOM. Dans le même temps, l'utilisation de la fonction anti-rebond peut efficacement éviter les appels excessifs de la fonction de traitement des événements de défilement et optimiser les performances de la page. Dans le même temps, nous pouvons également lier l'instruction v-on:scroll à l'élément racine de l'objet ou du composant window pour implémenter la surveillance des événements de défilement dans différents scénarios.

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!