Implémentation du défilement infini en réaction

Avant de commencer à coder, si vous voulez en savoir plus sur ce qu'est la pagination et pourquoi en avons-nous besoin, consultez mon blog ici.

Disons que la demande est d'afficher 50 éléments sur l'écran et chaque fois que l'utilisateur atteint le bas, chargez les 50 éléments suivants.
Pour cela, nous devons garder une trace de la position de défilement et continuer à la comparer avec le corps du document offsetHeight.

Pour obtenir la position de défilement, nous utiliserons window.scrollY.
Fondamentalement, window.scrollY donne le nombre de pixels pendant lesquels la page a défilé verticalement à partir du haut. Il vous indique jusqu'où l'utilisateur a parcouru la page.
En plus de window.scrollY, nous utiliserons deux valeurs supplémentaires pour vérifier si l'utilisateur a atteint le bas de la page ou non.
window.innerHeight : Ceci représente la hauteur de la partie visible de la fenêtre (la fenêtre). C'est la hauteur de la zone que l'utilisateur peut actuellement voir dans le navigateur sans faire défiler.

document.body.offsetHeight: Il donne la hauteur totale de l'élément body.

Code :

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i <= items; i++) {
    query.push(<p>{i}</p>);
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight + window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items + 50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return <div className="App">{query.map((q) => q)}</div>;
}

Explication : Le premier rendu de la page déclenchera le hook useEffect qui ajoutera un événement de défilement. Chaque fois qu'un événement de défilement se produit, la méthode onScroll() sera invoquée et vérifiera la position du défilement. S'il se situe en bas des 40, alors 50 éléments supplémentaires sont ajoutés à l'état des éléments.

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!