Как сделать бесконечную прокрутку элементов на react.js?

Пользователь

roxanne.hauck

от roxanne.hauck , в категории: JavaScript , 7 месяцев назад

61 | 0

1 ответ

Пользователь

terrence

от terrence , 6 месяцев назад

@roxanne.hauck

Для создания бесконечной прокрутки (инфинити-скролла) на React.js можно использовать следующий подход:

Определите компонент, который будет отображать список элементов, которые могут быть прокручены бесконечно. Например:

import React, { useState, useEffect } from "react";

const InfiniteScroll = ({ data }) => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(0);

  const loadMore = () => {
    const newItems = data.slice(page * 10, page * 10 + 10);
    setItems((prevItems) => [...prevItems, ...newItems]);
    setPage((prevPage) => prevPage + 1);
  };

  useEffect(() => {
    loadMore();
  }, []);

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{item.text}</div>
      ))}
      <button onClick={loadMore}>Load more</button>
    </div>
  );
};

export default InfiniteScroll;

В этом компоненте мы используем состояние items, которое хранит текущий список элементов, и page, который отслеживает текущую страницу. Мы также определяем функцию loadMore, которая добавляет следующую порцию элементов в список при нажатии на кнопку "Load more".
Мы используем хук useEffect с пустым массивом зависимостей, чтобы загрузить первую порцию элементов при монтировании компонента.
Для бесконечной прокрутки мы можем изменить функцию loadMore так, чтобы она загружала следующую порцию элементов при достижении конца списка:

const loadMore = () => {
  const newItems = data.slice(page * 10, page * 10 + 10);
  setItems((prevItems) => [...prevItems, ...newItems]);
  setPage((prevPage) => prevPage + 1);
};

useEffect(() => {
  const onScroll = () => {
    if (
      window.innerHeight + window.scrollY >=
      document.body.offsetHeight - 500
    ) {
      loadMore();
    }
  };
  window.addEventListener("scroll", onScroll);
  return () => window.removeEventListener("scroll", onScroll);
}, []);

Мы добавляем слушатель события scroll на объект window, который вызывает функцию loadMore при достижении конца страницы. В этом примере мы вызываем loadMore, когда скроллим вниз на 500 пикселей до конца страницы.
Не забудьте очистить слушатель событий при размонтировании компонента, чтобы избежать утечек памяти.

Это пример простой реализации бесконечной прокрутки на React.js, но в зависимости от ваших требований может потребоваться более сложная реализация.

0 | 0

Как сделать бесконечную прокрутку элементов на react.js?

1 ответ

Похожие обсуждения: