Как да внедрите безкрайно превъртане във Vue

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

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

За да следвате този урок, имате нужда от основно разбиране на Vue 3 и JavaScript. Трябва да знаете как да се справите HTTP заявки с Axios.

За да започнете да научите как да реализирайте безкрайно превъртане, създайте ново приложение Vue, като изпълните следното npm команда в предпочитаната от вас директория:

npm create vue

По време на настройката на проекта Vue ще ви подкани да изберете предварително зададена настройка за вашето приложение. Избирам Не за всички функции, тъй като няма да имате нужда от добавки към приложението си.

След като създадете новото приложение, отидете до директорията на приложението и изпълнете следното npm команда за инсталиране на необходимите пакети:

npm install axios @iconify/vue @vueuse/core

The npm командата инсталира три пакета: аксиос (за HTTP заявки), @iconify/vue (за лесно интегриране на икони във Vue), и @vueuse/ядро (предлага основни помощни програми на Vue).

Ще използвате аксиос и @iconify/vue за извличане на данни и добавяне на икони към вашето приложение. @vueuse/ядро съдържа помощни програми на Vue, включително useInfiniteScroll компонент за постигане на безкрайно превъртане.

Извличане на фиктивни данни от JSONPlaceholder API

За да приложите функцията за безкрайно превъртане, имате нужда от данни. Можете или да кодирате твърдо тези данни, или да получите данни от безплатен фалшив източник на API като JSON Placeholder.

Получаването на тези данни от JSONPlaceholder имитира сценарии от реалния живот, тъй като повечето уеб приложения получават данни от бази данни вместо твърдо кодирани данни.

За да извлечете данни от API за вашето приложение Vue, създайте нова папка във вашия src директория и я наименувайте 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". След това експортира функцията.

За да обясним допълнително, кодовият фрагмент започва с импортиране на аксиос библиотека. След това кодът дефинира getComments функция с два аргумента: макс и пропускам.

The getComments функция помещава axios.get() метод, който прави GET заявка към URL. URL адресът съдържа параметри на заявката макс и пропускам, които се интерполират в низа с помощта на шаблонни литерали (``). Това ви позволява да предавате динамични стойности в URL адреса.

След това функцията връща нов масив, състоящ се от тяло от коментарите, получени от крайната точка на API, използвайки карта функция.

Ако възникне грешка, кодовият фрагмент я регистрира в конзолата. След това кодовият фрагмент експортира тази функция в други части на вашето приложение.

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

Създайте нов файл InfiniteScroll.vue в src/компоненти директория и добавете следния код: