Home-theater-designers
Ang walang katapusang pag-scroll ay isang pamamaraan na magagamit mo upang magpakita ng higit pang nilalaman habang nag-i-scroll pababa ang iyong user ng app sa pahina. Inaalis nito ang pangangailangan para sa pagination at pinapayagan ang mga user ng app na magpatuloy sa pag-scroll sa malalaking set ng data.
MUO Video ng araw MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Pagse-set Up ng Iyong Vue Application
Upang masundan ang tutorial na ito, kailangan mo ng pangunahing pag-unawa sa Vue 3 at JavaScript. Dapat marunong kang humawak Mga kahilingan sa HTTP sa Axios .
Upang magsimulang matuto kung paano ipatupad ang walang katapusang pag-scroll , lumikha ng bagong Vue app sa pamamagitan ng pagpapatakbo ng sumusunod npm utos sa iyong ginustong direktoryo:
npm create vue
Sa panahon ng pag-setup ng proyekto, ipo-prompt ka ng Vue na pumili ng preset para sa iyong app. Pumili Hindi para sa lahat ng feature, dahil hindi mo kakailanganin ang anumang mga karagdagan sa iyong app.
Kapag nagawa mo na ang bagong app, mag-navigate sa direktoryo ng app at patakbuhin ang sumusunod npm command na i-install ang mga kinakailangang pakete:
npm install axios @iconify/vue @vueuse/core
Ang npm Ang command ay nag-i-install ng tatlong pakete: axios (para sa mga kahilingan sa HTTP), @iconify/vue (para sa madaling pagsasama ng icon sa Vue) , at @view/core (nag-aalok ng mahahalagang kagamitan sa Vue).
Gagamitin mo axios at @iconify/vue upang kumuha ng data at magdagdag ng mga icon sa iyong application. @view/core naglalaman ng mga utility ng Vue, kabilang ang gamitin angInfiniteScroll component para sa pagkamit ng walang katapusang pag-scroll.
Kinukuha ang Dummy Data Mula sa JSONPlaceholder API
Upang ipatupad ang walang katapusang pag-scroll function, kailangan mo ng data. Maaari mong i-hard code ang data na ito o kumuha ng data mula sa isang libreng pekeng source ng API tulad ng JSONPlaceholder .
Ang pagkuha ng mga data na ito mula sa JSONPlaceholder ay ginagaya ang mga totoong sitwasyon, dahil karamihan sa mga web application ay nakakakuha ng data mula sa mga database sa halip na sa hard-coded na data.
Upang kumuha ng data mula sa API para sa iyong Vue application, gumawa ng bagong folder sa iyong src direktoryo at pangalanan ito api . Sa folder na iyon, lumikha ng bagong JavaScript file at i-paste ang sumusunod na code:
//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;
Ang code snippet ay binubuo ng isang asynchronous na function para sa pagkuha ng mga komento mula sa API endpoint 'https://jsonplaceholder.typicode.com/comments' . Pagkatapos ay i-export nito ang function.
Upang ipaliwanag pa, magsisimula ang snippet ng code sa pag-import ng axios aklatan. Ang code pagkatapos ay tumutukoy sa getComments function na may dalawang argumento: max at iwanan .
Ang getComments function bahay ang axios.get() paraan na gumagawa ng kahilingan sa GET sa URL. Ang URL ay naglalaman ng mga parameter ng query max at iwanan , na inilalagay sa loob ng string gamit ang mga literal na template ( `` ). Binibigyang-daan ka nitong ipasa ang mga dynamic na halaga sa URL.
Ang function pagkatapos ay nagbabalik ng isang bagong array na binubuo ng katawan ng mga komentong natanggap mula sa API endpoint gamit ang mapa function.
kung paano mag-download ng musika mula sa ipod hanggang iTunes
Kung may anumang error na nangyari, itatala ito ng snippet ng code sa console. Pagkatapos, ine-export ng code snippet ang function na ito sa ibang bahagi ng iyong application.
Paggawa ng Infinite Scroll Component
Ngayong nahawakan mo na ang lohika para sa pagkuha ng dummy data, maaari kang lumikha ng bagong bahagi upang ipakita ang dummy data at pangasiwaan ang walang katapusang scrolling function.
Gumawa ng bagong file InfiniteScroll.vue nasa src/mga bahagi direktoryo at idagdag ang sumusunod na code:
<!-- 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>
Inilalarawan ng snippet ng code sa itaas ang script block ng InfiniteScroll sangkap.
Ini-import ng snippet ng code ang ref at gamitin angInfiniteScroll mga function mula sa tingnan at @view/core , ayon sa pagkakabanggit. Ini-import din ng snippet ang getComments function mula sa getComments.js file.
Pagkatapos, lumilikha ang snippet ng a listEl sanggunian sa ref function. listEl tumutukoy sa elemento ng DOM na may walang katapusang scroll functionality.
Ang Mga komentong ipinapakita Ang variable ay kumakatawan sa bilang ng mga komentong ipapakita sa simula sa page. Listahan ng mga komento hawak ang hanay ng mga komento na kinukuha ng snippet ng code kasama ang getComments function.
Tinutukoy ng snippet ang a commentsToDisplayOnScroll asynchronous function na kumukuha ng mga bagong komento sa getComments function at idinaragdag ang mga ito sa umiiral na Listahan ng mga komento array kasama ang spread operator ( ... ).
Sa wakas, ang snippet ng code ay nagpapatawag ng gamitin angInfiniteScroll function na upang paganahin ang walang katapusang pag-scroll na gawi na kumukuha ng tatlong argumento:
- Ang elemento ng DOM ( listEl ) reference ay kumakatawan sa listahan ng app user ay mag-scroll sa pamamagitan ng.
- Isang async function na tawag kapag nag-scroll ang user upang ma-trigger ang pagkuha ng mga bagong komento at idagdag ang mga ito sa Listahan ng mga komento .
- Isang opsyonal na object ng pagsasaayos na may mga katangian. Ang bagay { distansya: 10 } tumutukoy na ang mga bagong komento ay dapat magsimulang mag-load kapag ang user ay 10 pixels ang layo mula sa ibaba ng listahan.
Gamit ang Infinite Scroll Component
Matapos mahawakan ang walang katapusang lohika sa pag-scroll sa script block ng InfiniteScroll component, kailangan mong mag-render ng content sa template block.
bibili ka ng isang hard disk sa internet
I-paste ang sumusunod na code block sa iyong InfiniteScroll bahagi:
<!-- InfiniteScroll.vue -->
<template>
<div>
<ul ref="listEl">
<li v-for="comment in commentsList">
{{ comment }}
</li>
</ul>
</div>
</template>
Tinutukoy ng block ng code na ito ang template para sa isang bahagi ng Vue na responsable sa pag-render ng listahan ng mga komento.
Ang ang elemento ay mayroong koleksyon ng
Ang bawat komento mula sa array ay ipinapakita sa loob ng isang upang paganahin ang walang katapusang scroll function.
Pagkatapos, maaari mong gamitin ang InfiniteScroll sangkap sa iyong app.vue file.
<!-- 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>
Ini-import ng block ng code sa itaas ang InfiniteScroll Component at ang Icon sangkap. Pagkatapos ay binalot nito ang InfiniteScroll sangkap sa a Suspense sangkap.
Ang Suspense Ang component ay nagbibigay-daan sa iyo na mag-render ng fallback na content (isang icon) habang nireresolba ng Vue ang lahat ng mga asynchronous na function sa InfiniteScroll sangkap.
Ngayon, maaari mong i-preview ang iyong application sa pamamagitan ng pagpapatakbo ng command npm tumakbo dev sa direktoryo ng app. Dapat kang makakita ng katulad na interface sa larawan sa ibaba:
Ang preview sa itaas ay nagpapakita ng sampung komento habang itinakda mo ang commentsToBeDisplayed variable hanggang 10. Habang nag-i-scroll ka pababa, naglo-load ang app ng higit pang mga komentong babasahin.
Ang infinite scroll technique ay sikat sa mga web application, partikular sa mga social media app tulad ng X at Tiktok.
Tinitiyak ng diskarteng ito na mananatiling nakatuon ang mga user ng app habang patuloy itong kumukuha ng mas maraming data, na nagbibigay sa kanila ng patuloy na lumalawak na stream ng content upang basahin, matutunan, at panoorin, sa gayon ay pinapanatili ang kanilang interes.
Matutong Gumamit Muli ng Mga Bahagi ng Vue Gamit ang Mga Slot
Natutunan mo kung paano ipatupad ang infinite scroll technique gamit ang useInfiniteScroll component na available sa VueUse.
Sa modernong-panahong mga website, karaniwan nang mag-render ng parehong mga bahagi na may iba't ibang nilalamang HTML. Maaari mong matutunang gamitin muli ang mga bahagi ng Vue para makamit ang pare-parehong pakiramdam na ito sa iba't ibang bahagi ng isang web app.