Реагировать на разработку
Как написать бесконечный список прокрутки с помощью React
В этой статье я хочу рассказать вам, как написать бесконечную прокрутку с помощью React.
Бесконечная прокрутка подходит, когда вы не знаете размер страницы. Ваши элементы находятся в потоке (например, временная шкала). И единственный шанс — выводить товары в порядке очереди. Затем реализовать бесконечную прокрутку для удобства использования. Я написал простую симуляцию, которая загружает новые элементы, когда пользователи получают доступ к последним элементам прокрутки. Образец Ссылка на мини-приложение
Во-первых, нам нужен контейнер списка с фиксированной высотой и возможностью прокрутки с переполнением.
Вторая часть — это информационные карточки и элемент Загрузка…. Элемент загрузки виден только при активных операциях выборки.
Механика прокрутки
Когда компонент подключается к приложению, мы добавляем прослушиватели прокрутки в "infinite-scroll-container" и удаляем его, когда элемент размонтирован.
Существенной частью здесь является «прокрутка трека», что мы будем делать при прокрутке трека?
- Убедитесь, что у вас есть доступ к нижней части области прокрутки.
- Если доступ, то извлеките новый фрагмент данных из Backend
- И создавать новые элементы и отображать их в контейнере списка
Проверка прокрутки доступа к последнему элементу
Мы получаем элемент DOM с помощью document.getElementById. После этого мы вычисляем доступ к прокрутке снизу. Если прокрутить доступ вниз и получить false, то мы начали операцию выборки.
if (el.offsetHeight + el.scrollTop >= el.scrollHeight)
Затем я написал простую поддельную функцию извлечения, которая генерирует новые элементы после ожидания 0,6 секунды.
Продолжаем читать 😃
Подобные образцы и надписи вы можете найти по этой ссылке. Если вам нравится эта история. Пожалуйста 👏👏 и поделитесь.
Дополнительные материалы на plainenglish.io
