Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Infinite Scroll динамическая подгрузка

- Ученик (105), открыт 3 недели назад
Здравствуйте как можно реализовать динамическую погрузку для элементов , допустим я делаю запрос на карточки их 100 ( в URL нельзя засунуть не limit не page ) есть только их длина и надо изначально отрисовать 6 карточек а потом по мере того как пользоваться делать скролл будут подгружаться по 2 карточки ( примеры пожалуйста пишите на реакте )
3 ответа
Татьяна Просветленный (32581) 3 недели назад
Создайте компонент для бесконечной прокрутки:
 import React, { useState, useEffect } from 'react'; 

const InfiniteScroll = ({ items }) => {
const [visibleItems, setVisibleItems] = useState([]);
const [itemsToShow, setItemsToShow] = useState(6);

useEffect(() => {
// Изначальная загрузка элементов
setVisibleItems(items.slice(0, itemsToShow));
}, [items, itemsToShow]);

const handleScroll = () => {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
loadMoreItems();
};

const loadMoreItems = () => {
setItemsToShow(prevCount => prevCount + 2);
};

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

return (

{visibleItems.map((item, index) => (

{item}

))}

);
};

export default InfiniteScroll;
Используйте компонент в вашем приложении:
 import React from 'react'; 
import InfiniteScroll from './InfiniteScroll';

const App = () => {
const items = Array.from({ length: 100 }, (_, i) => `Card ${i + 1}`);

return (

Infinite Scroll Example




);
};

export default App;
CSS для стилизации карточек (по желанию):
 .card { 
border: 1px solid #ccc;
padding: 20px;
margin: 10px 0;
background: #f9f9f9;
}
В этом коде:

InfiniteScroll: Это основной компонент, который отображает элементы и управляет их подгрузкой.
handleScroll: Обработчик событий прокрутки, который вызывает функцию loadMoreItems при достижении конца страницы.
loadMoreItems: Функция, которая увеличивает количество отображаемых элементов на 2.
useEffect: Используется для установки начальных видимых элементов и добавления/удаления обработчика событий прокрутки.
Этот подход позволит вам реализовать бесконечную прокрутку и динамическую подгрузку карточек без необходимости использования limit или page параметров в URL.
-Ученик (105) 3 недели назад
Здравствуйте , а если items приходят не в props а делается запрос на них , сохраняются в state и в компоненте уже достаются через useSelector можно как то реализовать по другому что бы работало?
Анонимус Мудрец (13493) 3 недели назад
 import React, { useState, useEffect, useRef } from 'react'; 

function App() {
const [cards, setCards] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const observer = useRef(null);

useEffect(() => {
// Получение начальных 6 карточек
fetchCards(6);
}, []);

// Получение карточек с сервера
const fetchCards = async (count) => {
setIsLoading(true);
try {
// Запрос на получение карточек
const response = await fetch('сайтик');
const data = await response.json();

// Добавление новых карточек в массив
setCards((prevCards) => [...prevCards, ...data.slice(0, count)]);
setHasMore(data.length > prevCards.length);
} catch (error) {
console.error('Error fetching cards:', error);
} finally {
setIsLoading(false);
}
};

// Наблюдение за скроллом
useEffect(() => {
const handleObserver = (entries) => {
if (entries[0].isIntersecting && hasMore) {
fetchCards(2);
}
};

const options = {
root: null,
rootMargin: '200px',
threshold: 1.0,
};

// Создание наблюдателя
observer.current = new IntersectionObserver(handleObserver, options);

if (observer.current) {
observer.current.observe(document.querySelector('.observer'));
}

// Очистка наблюдателя при размонтировании компонента
return () => observer.current.disconnect();
}, [hasMore]);

return (

{/* Отрисовка карточек */}

{cards.map((card, index) => (

{/* Содержимое карточки */}

))}

{/* Элемент для наблюдения */}

{/* Загрузка */}
{isLoading &&
Загрузка...
}

);
}

export default App;
Андрей Устинов Профи (727) 3 недели назад
```import { useEffect, useState } from 'react' const [ posts, setPosts ] = useState([]) //Карточки ну или посты const [ pageLimit, setPageLimit ] = useState(6) //Изначальное количество постов useEffect(() => { const fetchData = async (url) => { const response = await fetch(url) const data = await response.json() const finalData = data.slice(0, pageLimit) setPosts(finalData) } fetchData('link-here') }, [pageLimit]) window.addEventListener('scroll', () => { if ((window.scrollY + window.innerHeight) >= document.body.offsetHeight) { setPageLimit(prev => prev += 2) //Увеличиваем количество постов на 2 когда скролл достигает конца страницы } })```
Андрей УстиновПрофи (727) 3 недели назад
фак. код скинулся без форматирования )
Андрей УстиновПрофи (727) 3 недели назад
 import { useEffect, useState } from 'react' 
const [ posts, setPosts ] = useState([]) //Карточки ну или посты
const [ pageLimit, setPageLimit ] = useState(6) //Изначальное количество постов

useEffect(() => {
const fetchData = async (url) => {
const response = await fetch(url)
const data = await response.json()
const finalData = data.slice(0, pageLimit)

setPosts(finalData)
}

fetchData('link-here')
}, [pageLimit])

window.addEventListener('scroll', () => {
if ((window.scrollY + window.innerHeight) >= document.body.offsetHeight) {
setPageLimit(prev => prev += 2) //Увеличиваем количество постов на 2 когда скролл достигает конца страницы
}
})
Похожие вопросы