Бесконачно померање је згодно када треба да прикажете велике скупове података у својој апликацији. Научите како да га примените у Вуе-у.
Бесконачно померање је техника коју можете да користите да прикажете више садржаја док корисник апликације скролује низ страницу. Елиминише потребу за пагинацијом и омогућава корисницима апликације да наставе да се крећу кроз велике скупове података.
Подешавање ваше Вуе апликације
Да бисте пратили овај водич, потребно вам је основно разумевање Вуе 3 и ЈаваСцрипт-а. Требало би да знате како да рукујете ХТТП захтеви са Акиос-ом.
Да почнемо да учимо како да имплементирати бесконачно померање, креирајте нову Вуе апликацију тако што ћете покренути следеће нпм команду у жељеном директоријуму:
npm create vue
Током подешавања пројекта, Вуе ће од вас затражити да изаберете унапред подешену вредност за своју апликацију. Изабери Не за све функције, јер вам неће бити потребни никакви додаци вашој апликацији.
Када креирате нову апликацију, идите до директоријума апликације и покрените следеће нпм команду за инсталирање потребних пакета:
npm install axios @iconify/vue @vueuse/core
Тхе нпм команда инсталира три пакета: акиос (за ХТТП захтеве), @ицонифи/вуе (за једноставну интеграцију икона у Вуе), и @вуеусе/цоре (нуди основне Вуе услужне програме).
Користићете акиос и @ицонифи/вуе да преузмете податке и додате иконе вашој апликацији. @вуеусе/цоре садржи Вуе услужне програме, укључујући усеИнфинитеСцролл компонента за постизање бесконачног померања.
Преузимање лажних података из ЈСОНПлацехолдер АПИ-ја
Да бисте применили функцију бесконачног померања, потребни су вам подаци. Можете или хард кодирати ове податке или добити податке из бесплатног лажног АПИ извора као што је ЈСОНПлацехолдер.
Добијање ових података из ЈСОНПлацехолдера имитира сценарије из стварног живота, јер већина веб апликација добија податке из база података уместо тврдо кодираних података.
Да бисте преузели податке из АПИ-ја за вашу Вуе апликацију, направите нову фасциклу у свом срц именик и именовати га апи. У том фолдеру направите нову ЈаваСцрипт датотеку и налепите следећи код:
//getComments.jsimport 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;
Исечак кода се састоји од асинхроне функције за добијање коментара са крајње тачке АПИ-ја " https://jsonplaceholder.typicode.com/comments". Затим извози функцију.
Да бисмо даље објаснили, исечак кода почиње увозом акиос библиотека. Код тада дефинише гетЦомментс функција са два аргумента: мак и изоставити.
Тхе гетЦомментс функција куће акиос.гет() метод који прави ГЕТ захтев за УРЛ. УРЛ садржи параметре упита мак и изоставити, који се интерполирају унутар стринга помоћу литерала шаблона (``). Ово вам омогућава да проследите динамичке вредности у УРЛ.
Функција затим враћа нови низ који се састоји од тело коментара примљених са крајње тачке АПИ-ја користећи Мапа функција.
Ако дође до грешке, исечак кода га евидентира на конзоли. Исечак кода затим извози ову функцију у друге делове ваше апликације.
Сада када сте обрадили логику за преузимање лажних података, можете креирати нову компоненту за приказ лажних података и руковати функцијом бесконачног померања.
Креирајте нову датотеку ИнфинитеСцролл.вуе у срц/компоненте директоријум и додајте следећи код:
