Vue में अनंत स्क्रॉलिंग कैसे लागू करें

आप जैसे पाठक MUO को समर्थन देने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन कमा सकते हैं। और पढ़ें।

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

दिन का एमयूओ वीडियो सामग्री जारी रखने के लिए स्क्रॉल करें

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

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

---

---

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

वायरलेस हेडफ़ोन को Xbox One से कैसे कनेक्ट करें

 npm create vue 

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

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

 npm install axios @iconify/vue @vueuse/core 

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

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

---

---

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

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

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

---

---

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

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

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

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

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

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

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

अनंत स्क्रॉल घटक बनाना

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

एक नई फ़ाइल बनाएँ 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 का उपयोग करें से कार्य करता है देखना और @व्यू/कोर , क्रमश। स्निपेट भी आयात करता है टिप्पणियाँ प्राप्त करें से कार्य करें getComments.js फ़ाइल।

फिर, स्निपेट एक बनाता है सूचीएल के साथ संदर्भ संदर्भ समारोह। सूचीएल अनंत स्क्रॉल कार्यक्षमता के साथ DOM तत्व का संदर्भ देता है।

टिप्पणियाँ प्रदर्शित वेरिएबल पृष्ठ पर प्रारंभ में प्रदर्शित होने वाली टिप्पणियों की संख्या को दर्शाता है। टिप्पणियाँ सूची कोड स्निपेट के साथ प्राप्त होने वाली टिप्पणियों की श्रृंखला रखता है टिप्पणियाँ प्राप्त करें समारोह।

स्निपेट परिभाषित करता है a टिप्पणियाँToDisplayOnScroll एसिंक्रोनस फ़ंक्शन जो नई टिप्पणियाँ लाता है टिप्पणियाँ प्राप्त करें कार्य करता है और उन्हें मौजूदा से जोड़ता है टिप्पणियाँ सूची स्प्रेड ऑपरेटर के साथ सरणी ( ... ).

अंत में, कोड स्निपेट को आमंत्रित करता है InfiniteScroll का उपयोग करें तीन तर्कों को लेते हुए अनंत स्क्रॉलिंग व्यवहार को सक्षम करने के लिए फ़ंक्शन:

• DOM तत्व ( सूचीएल ) संदर्भ उस सूची को दर्शाता है जिसे ऐप उपयोगकर्ता स्क्रॉल करेगा।
• एक एसिंक फ़ंक्शन कॉल जब उपयोगकर्ता नई टिप्पणियों को लाने और उन्हें जोड़ने के लिए स्क्रॉल करता है टिप्पणियाँ सूची .
• गुणों के साथ एक वैकल्पिक कॉन्फ़िगरेशन ऑब्जेक्ट। जो वस्तु { दूरी: 10 } निर्दिष्ट करता है कि नई टिप्पणियाँ तब लोड होनी शुरू होनी चाहिए जब उपयोगकर्ता सूची के नीचे से 10 पिक्सेल दूर हो।

अनंत स्क्रॉल घटक का उपयोग करना

के स्क्रिप्ट ब्लॉक में अनंत स्क्रॉलिंग तर्क को संभालने के बाद अनंत स्क्रॉल घटक, आपको टेम्पलेट ब्लॉक में सामग्री प्रस्तुत करने की आवश्यकता है।

अपने कंप्यूटर पर पोकेमॉन गो कैसे खेलें

निम्नलिखित कोड ब्लॉक को अपने में चिपकाएँ अनंत स्क्रॉल अवयव:

मीडिया सर्वर के लिए सर्वश्रेष्ठ लिनक्स डिस्ट्रो

 <!-- InfiniteScroll.vue --> 
<template> 
  <div> 
    <ul ref="listEl"> 
      <li v-for="comment in commentsList"> 
        {{ comment }} 
      </li> 
    </ul> 
  </div> 
</template> 

यह कोड ब्लॉक टिप्पणियों की सूची प्रस्तुत करने के लिए जिम्मेदार 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 सभी अतुल्यकालिक कार्यों को हल करता है अनंत स्क्रॉल अवयव।

अब, आप कमांड चलाकर अपने एप्लिकेशन का पूर्वावलोकन कर सकते हैं एनपीएम रन डेव ऐप की निर्देशिका में। आपको नीचे दी गई छवि के समान इंटरफ़ेस देखना चाहिए:



जैसे ही आप सेट करते हैं, उपरोक्त पूर्वावलोकन दस टिप्पणियाँ प्रदर्शित करता है टिप्पणियाँ प्रदर्शित की जाएँ वैरिएबल से 10. जैसे ही आप नीचे स्क्रॉल करते हैं, ऐप पढ़ने के लिए अधिक टिप्पणियाँ लोड करता है।

अनंत स्क्रॉल तकनीक वेब अनुप्रयोगों के बीच लोकप्रिय है, विशेष रूप से एक्स और टिकटॉक जैसे सोशल मीडिया ऐप्स में।

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

स्लॉट्स के साथ Vue घटकों का पुन: उपयोग करना सीखें

आपने सीखा है कि VueUse के लिए उपलब्ध useInfiniteScroll घटक के साथ अनंत स्क्रॉल तकनीक को कैसे कार्यान्वित किया जाए।

आधुनिक समय की वेबसाइटों में, समान घटकों को विभिन्न HTML सामग्री के साथ प्रस्तुत करना आम बात है। आप वेब ऐप के विभिन्न हिस्सों में इस सुसंगत अनुभव को प्राप्त करने के लिए Vue घटकों का पुन: उपयोग करना सीख सकते हैं।