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

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

Настройка вашего приложения Vue

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

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

npm create vue

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

После того, как вы создали новое приложение, перейдите в каталог приложения и запустите следующее

нпм команда для установки необходимых пакетов:

npm install axios @iconify/vue @vueuse/core

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

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

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

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

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

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

//getComments.js
import axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
 );
return comments.data.map((comment) => comment.body);
 } catch (error) {
console.error(error);
 }
}
exportdefault getComments;

Фрагмент кода состоит из асинхронной функции для получения комментариев от конечной точки API. " https://jsonplaceholder.typicode.com/comments". Затем он экспортирует функцию.

Для дальнейшего пояснения, фрагмент кода начинается с импорта аксиомы библиотека. Затем код определяет получитькомментарии функция с двумя аргументами: Макс и пропускать.

получитькомментарии функции вмещает в себя аксиос.получить() метод, который делает запрос GET к URL-адресу. URL-адрес содержит параметры запроса Макс и пропускать, которые интерполируются внутри строки с использованием литералов шаблона (``). Это позволяет передавать динамические значения в URL.

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

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

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

Создать новый файл InfiniteScroll.vue в источник/компоненты каталог и добавьте следующий код: