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

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

Настроить Вью. приложение

Чтобы следовать этому руководству, вам необходимы базовые знания Vue 3 и JavaScript. Вы должны знать, как обрабатывать HTTP-запросы с помощью Axios.

Чтобы начать изучать, как реализовать бесконечную прокрутку, создайте новое приложение Vue, выполнив следующую команду npm в предпочитаемом вами каталоге:

нпм создать вью

При настройке проекта Vue предложит вам выбрать пресет для приложения. Выберите Нет для всех функций, так как вам не нужно будет добавлять их в приложение.

Создав новое приложение, перейдите в каталог вашего приложения и выполните следующую команду npm, чтобы установить необходимые пакеты:

npm установить axios @iconify/vue @vueuse/core

Команда npm устанавливает 3 пакета: axios (для HTTP-запросов), @iconify/vue (для простой интеграции значков в Vue) и @vueuse/core (предоставляет необходимые функции Vue).

Вы будете использовать axios и @iconify/vue для получения данных и добавления значков в приложение. @vueuse/core содержит виджеты Vue, включая компонент useInfiniteScroll для бесконечной загрузки.

Получение фиктивных данных из JSONPlaceholder API

Чтобы реализовать бесконечную прокрутку, вам нужны данные. Вы можете жестко закодировать данные или получить их из бесплатного источника псевдо-API, такого как JSONPlaceholder.

Получение этих данных из JSONPlaceholder имитирует сценарии реальной жизни, поскольку большинство веб-приложений получают данные из базы данных, а не жестко закодированные данные.

Чтобы получить данные из API для приложения Vue, создайте новую папку в каталоге src и назовите ее api. В этой папке создайте новый файл JavaScript и вставьте следующий код:

//getComments.js импортировать аксиомы из «аксиос»; асинхронная функция getComments (макс., опустить) { try { const comments = await axios.get (`); вернуть comments.data.map((comment) => comment.body); } поймать (ошибка) { console.error(ошибка); } } экспортировать getComments по умолчанию;

Этот код включает асинхронную функцию для получения комментариев от конечной точки API. Затем он выведет эту функцию.

Чтобы уточнить, код начинается с импорта библиотеки axios. Затем этот код определяет функцию getComments с двумя аргументами: max и omit.

Функция getComments содержит метод axios.get(), который генерирует запрос GET для URL. Этот URL-адрес содержит параметры запроса max и omit, интерполированные в строку с использованием символа шаблона ( “ ). Это позволяет передавать динамические значения в URL.

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

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

Создание компонентов бесконечной прокрутки

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

Добавьте новый файл InfiniteScroll.vue в папку src/components и добавьте следующий код:

Приведенный выше код описывает блок сценария компонента InfiniteScroll.

Этот код импортирует функции ref и useInfiniteScroll из vue и @vueuse/core соответственно. Код также импортирует функцию getComments из файла getComments.js.

Затем этот фрагмент создает ссылку listEl с помощью функции ref. listEl ссылается на элемент DOM с функцией бесконечной прокрутки загрузки.

Переменная commentsDisplayed представляет количество комментариев, которые первоначально отображаются на хвостовике. commentsList содержит массив комментариев, которые код находит с помощью функции getComments.

Этот фрагмент содержит асинхронную функцию commentsToDisplayOnScroll, которая находит новые комментарии с помощью функции getComments и добавляет их в массив commentsList с помощью оператора раскрытия (.).

Наконец, этот код вызывает функцию useInfiniteScroll для запуска действия бесконечной прокрутки, которое принимает 3 аргумента:

1. Элемент DOM (listEl) представляет собой список, который будет прокручивать пользователь приложения.
2. Асинхронная функция вызывается, когда пользователь прокручивает страницу, чтобы вызвать выборку новых комментариев и добавляет их в commentList.
3. Необязательный объект конфигурации со свойствами. Объект { Distance: 10 } указывает, что новые комментарии должны начать загружаться, когда пользователь находится в 10 пикселях от конца списка.

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

После обработки бесконечной логики загрузки в блоке сценария InfiniteScroll вам необходимо отобразить содержимое в блоке шаблона.

Вставьте следующий код внутрь компонента InfiniteScroll:

1. {{ Комментарии }}

Этот блок кода определяет шаблон для компонента Vue, отвечающего за отображение списка комментариев.

Компонент содержит набор компонентов

созданный с помощью команды v-for (для отображения списка), выполняет итерацию по массиву commentsList.

Каждый комментарий из массива отображается в элементе

1. использовать интерполяцию данных ({{комментарий}}). Этот блок кода назначает ссылку listEl для запуска функции бесконечной прокрутки.

Затем вы можете использовать компонент InfiniteScroll в файле App.vue.

Приведенный выше блок кода импортирует компоненты InfiniteScroll и Icon. Затем он оборачивает InfiniteScroll в Suspense.

Компонент Suspense позволяет отображать резервный контент (значок), когда Vue разрешает все асинхронные функции в компоненте InfiniteScroll.

Теперь вы можете предварительно просмотреть свое приложение, выполнив команду npm run dev в каталоге вашего приложения. Вы увидите интерфейс, похожий на изображение ниже:

Окно предварительного просмотра выше показывает 10 комментариев, потому что вы установили для переменной c commentsToBeDisplayed значение 10. По мере прокрутки вниз приложение загружает больше комментариев для чтения.

Метод бесконечной прокрутки популярен среди веб-приложений, особенно в приложениях социальных сетей, таких как X, TikTok.

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