Как реализовать бесконечную прокрутку в веб-приложении

Бесконечная прокрутка. Бесконечная прокрутка позволяет контенту загружаться непрерывно по мере того, как пользователь перемещается вниз по странице, в отличие от метода традиционного выравнивания страницы по щелчку для загрузки. Эта функция может обеспечить более плавную работу, особенно на мобильных устройствах.

Давайте вместе с TipsMake.com.com рассмотрим, как настроить простую бесконечную прокрутку с помощью HTML, CSS и JavaScript!

Настройка интерфейса

Начните с базовой структуры HTML для отображения контента. Вот пример:

Эта страница содержит строку изображений-заполнителей и ссылается на два источника: файл CSS и файл JavaScript.

Стили CSS для прокручиваемого контента

Чтобы отобразить изображение-заполнитель в сетке, добавьте в файл style.css следующий CSS:

* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } HTML {размер шрифта: 62,5%; } body { семейство шрифтов: Cambria, Times, «Times New Roman», serif; } h1 {выравнивание текста: центр; размер шрифта: 5rem; отступ: 2рем; } img { ширина: 100%; дисплей: блок; } .products__list { display: flex; flex-wrap: обертка; разрыв: 2рем; оправдание-содержание: центр; } .products__list > * { width:calc(33% – 2rem); } .loading-indicator { display: none; позиция: абсолютная; внизу: 30 пикселей; осталось: 50%; фон: #333; отступы: 1рем 2рем; цвет: #fff; радиус границы: 10 пикселей; преобразование: TranslateX (-50%); }

В настоящее время ваша страница будет выглядеть так:

Основная реализация с помощью JS

Отредактируйте скрипт.js. Чтобы реализовать бесконечную прокрутку, вам необходимо определить, когда пользователь прокрутил нижнюю часть контейнера или страницы контента.

«используйте строгий»; window.addeventlistener (“scroll”, () => {if (window.scroly + window.innerheight> = document.documentelement.scrollheight – 100) {// người dùng ở gần dưới cùng, tìm nạp nhiều nội dung hơn a fetchmontent (nạp nhiều nội dung hơn a (nạp nhiều nội dung hơn a ); } });

Затем создайте функцию для получения дополнительных данных-заполнителей.

async function fetchMoreContent() { try { let response = await fetch(” if (!response.ok) { throw new Error(“Ответ сети не в порядке”); } let data = await response.json(); console.log (данные); } catch (error) { console.error(“Возникла проблема с получением нового контента:”, error); }finally { console.log(“Функция Fetch запущена”); } }

Для этого проекта вы можете использовать API от fakestoreapi.

Чтобы убедиться, что данные извлекаются при прокрутке, посмотрите на консоль:

При прокрутке вы увидите данные, полученные несколько раз. Это может быть фактором, влияющим на производительность устройства. Чтобы избежать этого, создайте начальное состояние выборки данных:

пусть isFetching = ложь;

Затем отредактируйте функцию выборки, чтобы находить данные только после ранее завершенного процесса.

асинхронная функция fetchMoreContent() { if (isFetching) return; // Thoát nou tìm nạp dữ liệu đã xong isFetching = true; // Флаг Đặt пел true try { let response = await fetch(” if (!response.ok) { throw new Error(“Ответ сети не в порядке”); } let data = await response.json(); } catch ( error) { console.error(“Возникла проблема с получением нового контента:”, error); }finally { console.log(“Функция Fetch запущена”); isFetching = false; // Флаг сброса пел false } }

Показать новый контент

Чтобы показывать новый контент, когда пользователь прокручивает страницу вниз, создайте функцию, которая добавляет изображения в основной контейнер.

Сначала выберите основной компонент:

const ProductsList = document.querySelector(“.products__list”);

Затем создайте функцию, которая добавляет контент:

function displayNewContent(data) { data.forEach((item) => { const imgElement = document.createElement(“img”); imgElement.src = item.image; imgElement.alt = item.title; ProductsList.appendChild(imgElement) ; // Добавляем в контейнер ProductsList }); }

Наконец, отредактируйте функцию выборки и передайте полученные данные в функцию добавления.

асинхронная функция fetchMoreContent() { if (isFetching) return; isFetching = правда; try { let response = await fetch(” if (!response.ok) { throw new Error(“Ответ сети не в порядке”); } let data = await response.json(); displayNewContent(data); } catch (ошибка ) { console.error(“Проблема с получением нового контента:”, error); }finally { console.log(“Функция Fetch запущена”); isFetching = false; } }

Всё, теперь будет работать бесконечная прокрутка.

Улучшите бесконечную прокрутку

Чтобы улучшить взаимодействие с пользователем, вы можете отображать индикатор загрузки при загрузке нового контента. Начните с добавления этого HTML.

Затем выберите компонент загрузки.

const loadingIndicator = document.querySelector(“.loading-indicator”);

Наконец, создайте две функции, которые включают/отключают видимость индикатора загрузки.

функция showLoadingIndicator() { loadingIndicator.style.display = “блок”; console.log(“Загрузка.”); } functionideLoadingIndicator() { loadingIndicator.style.display = “none”; console.log(“Загрузка завершена.”); }

Затем добавьте их в функцию выборки.

асинхронная функция fetchMoreContent() { if (isFetching) return; // Выход, если уже получена информация isFetching = true; показатьИндикаторЗагрузки(); // Показать загрузчик try { let response = await fetch(” if (!response.ok) { throw new Error(“Ответ сети не в порядке”); } let data = await response.json(); displayNewContent(data); } catch (error) { console.error(“Проблема с получением нового контента:”, error); }finally { console.log(“Функция Fetch запущена”);ideLoadingIndicator(); // Скрыть загрузчик isFetching = false; } }

Результат:

На что следует обратить внимание при использовании бесконечной прокрутки:

Не извлекайте слишком много элементов одновременно, так как это может снизить производительность браузера.
Вместо извлечения контента сразу после обнаружения события прокрутки используйте функцию отладки, чтобы немного задержать получение. Это может предотвратить чрезмерные сетевые запросы.
Не всем пользователям нравится бесконечная прокрутка. При необходимости предоставьте возможность использовать компонент нумерации страниц.

Если осталось мало контента для загрузки, сообщите об этом пользователю, вместо того чтобы постоянно пытаться получить больше данных.

В приведенной выше статье вы познакомились с «Как реализовать бесконечную прокрутку в веб-приложении». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!