जब आपको अपने एप्लिकेशन में बड़े डेटासेट प्रदर्शित करने की आवश्यकता होती है तो अनंत स्क्रॉलिंग काम आती है। जानें कि इसे Vue में कैसे कार्यान्वित करें।

अनंत स्क्रॉलिंग एक ऐसी तकनीक है जिसका उपयोग आप अधिक सामग्री प्रदर्शित करने के लिए कर सकते हैं क्योंकि आपका ऐप उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है। यह पेजिनेशन की आवश्यकता को समाप्त करता है और ऐप उपयोगकर्ताओं को बड़े डेटा सेट के माध्यम से स्क्रॉल करना जारी रखने की अनुमति देता है।

अपना Vue एप्लिकेशन सेट करना

इस ट्यूटोरियल का अनुसरण करने के लिए, आपको Vue 3 और JavaScript की बुनियादी समझ की आवश्यकता है। आपको पता होना चाहिए कि कैसे संभालना है एक्सियोस के साथ HTTP अनुरोध.

कैसे करना है सीखना शुरू करने के लिए अनंत स्क्रॉलिंग लागू करें, निम्नलिखित चलाकर एक नया Vue ऐप बनाएं NPM अपनी पसंदीदा निर्देशिका में कमांड करें:

npm create vue

प्रोजेक्ट सेटअप के दौरान, Vue आपको अपने ऐप के लिए प्रीसेट चुनने के लिए संकेत देगा। चुनना नहीं सभी सुविधाओं के लिए, क्योंकि आपको अपने ऐप में किसी भी अतिरिक्त चीज़ की आवश्यकता नहीं होगी।

एक बार जब आप नया ऐप बना लें, तो ऐप की निर्देशिका पर जाएँ और निम्नलिखित चलाएँ NPM आवश्यक पैकेज स्थापित करने का आदेश:

instagram viewer 
npm install axios @iconify/vue @vueuse/core

NPM कमांड तीन पैकेज स्थापित करता है: अक्ष (HTTP अनुरोधों के लिए), @iconify/vue (Vue में आसान आइकन एकीकरण के लिए), और @vueuse/core (आवश्यक Vue उपयोगिताओं की पेशकश)।

आप प्रयोग करेंगे अक्ष और @iconify/vue डेटा लाने और अपने एप्लिकेशन में आइकन जोड़ने के लिए। @vueuse/core इसमें Vue उपयोगिताएँ शामिल हैं, जिनमें शामिल हैं InfiniteScroll का उपयोग करें अनंत स्क्रॉलिंग प्राप्त करने के लिए घटक।

JSONप्लेसहोल्डर एपीआई से डमी डेटा लाया जा रहा है

अनंत स्क्रॉलिंग फ़ंक्शन को लागू करने के लिए, आपको डेटा की आवश्यकता है। आप या तो इन डेटा को हार्ड कोड कर सकते हैं या किसी निःशुल्क नकली एपीआई स्रोत से डेटा प्राप्त कर सकते हैं JSONPप्लेसहोल्डर.

जेएसओएनप्लेसहोल्डर से ये डेटा प्राप्त करना वास्तविक जीवन के परिदृश्यों का अनुकरण करता है, क्योंकि अधिकांश वेब एप्लिकेशन हार्ड-कोडेड डेटा के बजाय डेटाबेस से डेटा प्राप्त करते हैं।

अपने Vue एप्लिकेशन के लिए API से डेटा लाने के लिए, अपने में एक नया फ़ोल्डर बनाएं स्रोत निर्देशिका और इसे नाम दें एपीआई. उस फ़ोल्डर में, एक नई जावास्क्रिप्ट फ़ाइल बनाएं और निम्नलिखित कोड पेस्ट करें:

//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;

कोड स्निपेट में एपीआई एंडपॉइंट से टिप्पणियां प्राप्त करने के लिए एक एसिंक्रोनस फ़ंक्शन होता है " https://jsonplaceholder.typicode.com/comments". इसके बाद यह फ़ंक्शन निर्यात करता है।

आगे समझाने के लिए, कोड स्निपेट आयात करने से शुरू होता है अक्ष पुस्तकालय। कोड तब परिभाषित करता है टिप्पणियाँ प्राप्त करें दो तर्कों के साथ कार्य करें: अधिकतम और छोड़ देना.

टिप्पणियाँ प्राप्त करें समारोह गृह axios.get() वह विधि जो URL पर GET अनुरोध करती है। यूआरएल में क्वेरी पैरामीटर हैं अधिकतम और छोड़ देना, जो टेम्पलेट शाब्दिक का उपयोग करके स्ट्रिंग के भीतर प्रक्षेपित होते हैं (``). यह आपको यूआरएल में गतिशील मान पारित करने की अनुमति देता है।

फ़ंक्शन तब एक नई सरणी लौटाता है जिसमें शामिल है शरीर का उपयोग करके एपीआई एंडपॉइंट से प्राप्त टिप्पणियाँ नक्शा समारोह।

यदि कोई त्रुटि होती है, तो कोड स्निपेट उसे कंसोल पर लॉग कर देता है। फिर कोड स्निपेट इस फ़ंक्शन को आपके एप्लिकेशन के अन्य भागों में निर्यात करता है।

अब जब आपने डमी डेटा लाने के तर्क को संभाल लिया है, तो आप डमी डेटा को प्रदर्शित करने और अनंत स्क्रॉलिंग फ़ंक्शन को संभालने के लिए एक नया घटक बना सकते हैं।

एक नई फ़ाइल बनाएँ InfiniteScroll.vue में स्रोत/घटक निर्देशिका बनाएं और निम्नलिखित कोड जोड़ें: