Home-theater-designers
Бесконечная прокрутка — это метод, который вы можете использовать для отображения большего количества контента, когда пользователь вашего приложения прокручивает страницу вниз. Это устраняет необходимость в разбиении на страницы и позволяет пользователям приложения продолжать прокручивать большие наборы данных.
МУО Видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ СОДЕРЖАНИЕ
Настройка вашего приложения Vue
Чтобы следовать этому руководству, вам необходимо базовое понимание Vue 3 и JavaScript. Вы должны знать, как обращаться HTTP-запросы с Axios .
Чтобы начать учиться тому, как реализовать бесконечную прокрутку , создайте новое приложение Vue, выполнив следующее нпм команду в предпочитаемом вами каталоге:
Ф0КА856БА53ЭДФ64Д31056Д047975Д8ЭБ0КФ55КБ
Во время настройки проекта Vue предложит вам выбрать пресет для вашего приложения. Выбирать Нет для всех функций, так как вам не потребуются какие-либо дополнения к вашему приложению.
После того, как вы создали новое приложение, перейдите в каталог приложения и запустите следующее нпм команда для установки необходимых пакетов:
npm install axios @iconify/vue @vueuse/core
нпм команда устанавливает три пакета: аксиомы (для HTTP-запросов), @iconify/vue (для легкой интеграции значков в Vue) , и @просмотр/ядро (предлагая необходимые утилиты Vue).
Вы будете использовать аксиомы и @iconify/vue для получения данных и добавления значков в ваше приложение. @просмотр/ядро содержит утилиты Vue, в том числе использованиеInfiniteScroll компонент для достижения бесконечной прокрутки.
Получение фиктивных данных из JSONPlaceholder API
Чтобы реализовать функцию бесконечной прокрутки, вам нужны данные. Вы можете либо жестко закодировать эти данные, либо получить данные из бесплатного поддельного источника API, например JSONPlaceholder .
Получение этих данных из JSONPlaceholder имитирует сценарии реальной жизни, поскольку большинство веб-приложений получают данные из баз данных, а не из жестко запрограммированных данных.
Чтобы получить данные из API для вашего приложения Vue, создайте новую папку в своем источник каталог и назовите его API . В этой папке создайте новый файл JavaScript и вставьте следующий код:
//getComments.js
import axios from "axios";
async function getComments(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);
}
}
export default getComments;
Фрагмент кода состоит из асинхронной функции для получения комментариев от конечной точки API. 'https://jsonplaceholder.typicode.com/comments' . Затем он экспортирует функцию.
Для дальнейшего пояснения, фрагмент кода начинается с импорта аксиомы библиотека. Затем код определяет получитькомментарии функция с двумя аргументами: Макс и пропускать .
получитькомментарии функции вмещает в себя аксиос.получить() метод, который делает запрос GET к URL-адресу. URL-адрес содержит параметры запроса Макс и пропускать , которые интерполируются внутри строки с использованием литералов шаблона ( `` ). Это позволяет передавать динамические значения в URL.
Затем функция возвращает новый массив, состоящий из тело комментариев, полученных от конечной точки API с помощью карта функция.
Если возникает какая-либо ошибка, фрагмент кода записывает ее в консоль. Затем фрагмент кода экспортирует эту функцию в другие части вашего приложения.
Создание компонента бесконечной прокрутки
Теперь, когда вы разобрались с логикой извлечения фиктивных данных, вы можете создать новый компонент для отображения фиктивных данных и обработки функции бесконечной прокрутки.
Создать новый файл InfiniteScroll.vue в источник/компоненты каталог и добавьте следующий код:
<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
const newComments = await getComments(
commentsDisplayed,
commentsList.value.length
);
commentsList.value.push(...newComments);
};
useInfiniteScroll(
listEl,
async () => {
await commentsToDisplayOnScroll();
},
{ distance: 10 }
);
</script>
Фрагмент кода выше описывает блок сценария Бесконечная прокрутка компонент.
Фрагмент кода импортирует ссылка и использованиеInfiniteScroll функции от вид и @просмотр/ядро , соответственно. Фрагмент также импортирует получитькомментарии функцию от получитькомментарии.js файл.
Затем фрагмент создает списокЭль ссылка с ссылка функция. списокЭль ссылается на элемент DOM с функцией бесконечной прокрутки.
могу ли я играть в игры для playstation 3 на ps4
комментарииПоказано переменная представляет количество комментариев, отображаемых на странице изначально. комментарииСписок содержит массив комментариев, которые фрагмент кода извлекает с помощью получитькомментарии функция.
Фрагмент определяет комментарииToDisplayOnScroll асинхронная функция, которая извлекает новые комментарии с получитькомментарии функции и добавляет их к существующим комментарииСписок массив с оператором спреда ( ... ).
Наконец, фрагмент кода вызывает использованиеInfiniteScroll Функция для включения бесконечной прокрутки, принимающая три аргумента:
- Элемент DOM ( списокЭль ) reference представляет собой список, который будет прокручивать пользователь приложения.
- Вызов асинхронной функции, когда пользователь прокручивает, чтобы инициировать выборку новых комментариев и добавление их к комментарииСписок .
- Необязательный объект конфигурации со свойствами. Объект { расстояние: 10 } указывает, что новые комментарии должны начать загружаться, когда пользователь находится в 10 пикселях от конца списка.
Использование компонента бесконечной прокрутки
После обработки логики бесконечной прокрутки в блоке сценария Бесконечная прокрутка компонент, вам необходимо отображать содержимое в блоке шаблона.
Вставьте следующий блок кода в свой Бесконечная прокрутка компонент:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Этот блок кода определяет шаблон для компонента Vue, отвечающего за отображение списка комментариев.
<ул> элемент содержит коллекцию <это> элементы, созданные с помощью директива v-for (для рендеринга списков) , который перебирает комментарииСписок множество.
Каждый комментарий из массива отображается в <это> элемент с использованием интерполяции данных ( {{комментарий}} ). Кодовый блок назначает списокЭль ссылка на <ул> чтобы включить функцию бесконечной прокрутки.
Затем вы можете использовать Бесконечная прокрутка компонент в вашем app.vue файл.
<!-- App.vue -->
<script setup>
import InfiniteScroll from "./components/InfiniteScroll.vue";
import { Icon } from "@iconify/vue";
</script>
<template>
<Suspense>
<InfiniteScroll />
<template #fallback>
<Icon icon="eos-icons:bubble-loading" width="250" height="250" />
</template>
</Suspense>
</template>
Блок кода выше импортирует Бесконечная прокрутка Компонент и Икона компонент. Затем он оборачивает Бесконечная прокрутка компонент в саспенс компонент.
саспенс Компонент позволяет отображать резервный контент (значок), поскольку Vue разрешает все асинхронные функции в Бесконечная прокрутка компонент.
Теперь вы можете просмотреть свое приложение, выполнив команду нпм запустить разработчик в каталоге приложения. Вы должны увидеть интерфейс, похожий на изображение ниже:
В предварительном просмотре выше отображаются десять комментариев по мере того, как вы устанавливаете комментарииToBeDisplayed значение переменной равно 10. По мере прокрутки вниз приложение загружает больше комментариев для чтения.
Метод бесконечной прокрутки популярен среди веб-приложений, особенно в приложениях для социальных сетей, таких как X и Tiktok.
Этот метод гарантирует, что пользователи приложения будут оставаться вовлеченными, поскольку оно постоянно получает больше данных, предоставляя им постоянно расширяющийся поток контента для чтения, изучения и просмотра, тем самым поддерживая их интерес.
Научитесь повторно использовать компоненты Vue со слотами
Вы узнали, как реализовать технику бесконечной прокрутки с помощью компонента useInfiniteScroll, доступного для VueUse.
На современных веб-сайтах принято отображать одни и те же компоненты с разным содержимым HTML. Вы можете научиться повторно использовать компоненты Vue, чтобы добиться единообразия в разных частях веб-приложения.