Vue இல் எல்லையற்ற ஸ்க்ரோலிங்கை எவ்வாறு செயல்படுத்துவது

உங்களைப் போன்ற வாசகர்கள் MUO ஐ ஆதரிக்க உதவுகிறார்கள். எங்கள் தளத்தில் உள்ள இணைப்புகளைப் பயன்படுத்தி நீங்கள் வாங்கும் போது, ​​நாங்கள் ஒரு இணை கமிஷனைப் பெறலாம். மேலும் படிக்க.

எல்லையற்ற ஸ்க்ரோலிங் என்பது உங்கள் ஆப்ஸ் பயனர் பக்கத்தை கீழே உருட்டும் போது அதிக உள்ளடக்கத்தைக் காட்ட நீங்கள் பயன்படுத்தக்கூடிய ஒரு நுட்பமாகும். இது பேஜினேஷனுக்கான தேவையை நீக்குகிறது மற்றும் பெரிய டேட்டா செட் மூலம் ஸ்க்ரோலிங் செய்ய ஆப்ஸ் பயனர்களை அனுமதிக்கிறது.

அன்றைய MUO வீடியோ உள்ளடக்கத்துடன் தொடர உருட்டவும்

உங்கள் Vue பயன்பாட்டை அமைக்கிறது

இந்த டுடோரியலைப் பின்பற்ற, உங்களுக்கு Vue 3 மற்றும் JavaScript பற்றிய அடிப்படை புரிதல் தேவை. எப்படி கையாள்வது என்பதை நீங்கள் அறிந்திருக்க வேண்டும் Axios உடன் HTTP கோரிக்கைகள் .

---

---

எப்படி என்பதை அறிய ஆரம்பிக்க வேண்டும் எல்லையற்ற ஸ்க்ரோலிங் செயல்படுத்தவும் , பின்வருவனவற்றை இயக்குவதன் மூலம் புதிய Vue பயன்பாட்டை உருவாக்கவும் npm உங்களுக்கு விருப்பமான கோப்பகத்தில் கட்டளை:

 npm create vue 

திட்ட அமைப்பின் போது, ​​உங்கள் பயன்பாட்டிற்கான முன்னமைவைத் தேர்ந்தெடுக்க Vue உங்களைத் தூண்டும். தேர்வு செய்யவும் இல்லை எல்லா அம்சங்களுக்கும், உங்கள் பயன்பாட்டில் எந்தச் சேர்த்தலும் தேவையில்லை.

நீங்கள் புதிய பயன்பாட்டை உருவாக்கியதும், பயன்பாட்டின் கோப்பகத்திற்குச் சென்று பின்வருவனவற்றை இயக்கவும் npm தேவையான தொகுப்புகளை நிறுவ கட்டளை:

 npm install axios @iconify/vue @vueuse/core 

தி npm கட்டளை மூன்று தொகுப்புகளை நிறுவுகிறது: அச்சுகள் (HTTP கோரிக்கைகளுக்கு), @iconify/vue (Vue இல் ஐகான்களை எளிதாக ஒருங்கிணைக்க) , மற்றும் @பார்வை/கோர் (அத்தியாவசிய Vue பயன்பாடுகளை வழங்குகிறது).

நீங்கள் பயன்படுத்துவீர்கள் அச்சுகள் மற்றும் @iconify/vue தரவைப் பெற மற்றும் உங்கள் பயன்பாட்டில் ஐகான்களைச் சேர்க்க. @பார்வை/கோர் உட்பட Vue பயன்பாடுகள் உள்ளன InfiniteScroll பயன்படுத்தவும் எல்லையற்ற ஸ்க்ரோலிங்கை அடைவதற்கான கூறு.

---

---

JSONPlaceholder API இலிருந்து போலித் தரவைப் பெறுகிறது

எல்லையற்ற ஸ்க்ரோலிங் செயல்பாட்டைச் செயல்படுத்த, உங்களுக்கு தரவு தேவை. இந்தத் தரவைக் கடுமையாகக் குறியிடலாம் அல்லது இலவச போலி API மூலத்திலிருந்து தரவைப் பெறலாம் JSONPlaceholder .

JSONPlaceholder இலிருந்து இந்தத் தரவைப் பெறுவது நிஜ வாழ்க்கைக் காட்சிகளைப் பின்பற்றுகிறது, ஏனெனில் பெரும்பாலான இணையப் பயன்பாடுகள் கடின குறியிடப்பட்ட தரவுக்குப் பதிலாக தரவுத்தளங்களிலிருந்து தரவைப் பெறுகின்றன.

---

---

நெட்ஃபிக்ஸ் ஒரு மாதத்திற்கு எவ்வளவு செலவாகும்

உங்கள் Vue பயன்பாட்டிற்கான API இலிருந்து தரவைப் பெற, உங்களில் புதிய கோப்புறையை உருவாக்கவும் src அடைவு மற்றும் பெயரிடவும் 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; 

குறியீடு துணுக்கு API இறுதிப்புள்ளியில் இருந்து கருத்துகளைப் பெறுவதற்கான ஒத்திசைவற்ற செயல்பாட்டைக் கொண்டுள்ளது 'https://jsonplaceholder.typicode.com/comments' . இது செயல்பாட்டை ஏற்றுமதி செய்கிறது.

மேலும் விளக்க, குறியீடு துணுக்கை இறக்குமதி செய்வதில் இருந்து தொடங்குகிறது அச்சுகள் நூலகம். குறியீடு பின்னர் வரையறுக்கிறது கருத்துகளைப் பெறவும் இரண்டு வாதங்களுடன் செயல்பாடு: அதிகபட்சம் மற்றும் தவிர்க்கவும் .

தி கருத்துகளைப் பெறவும் செயல்பாடு வீடுகள் axios.get() URL க்கு GET கோரிக்கையை உருவாக்கும் முறை. URL வினவல் அளவுருக்களைக் கொண்டுள்ளது அதிகபட்சம் மற்றும் தவிர்க்கவும் , அவை வார்ப்புருவின் எழுத்துக்களைப் பயன்படுத்தி சரத்திற்குள் இடைக்கணிக்கப்படுகின்றன ( `` ) இது மாறும் மதிப்புகளை URL இல் அனுப்ப உங்களை அனுமதிக்கிறது.

செயல்பாடு ஒரு புதிய வரிசையை வழங்குகிறது உடல் API இறுதிப் புள்ளியில் இருந்து பெறப்பட்ட கருத்துகள் வரைபடம் செயல்பாடு.

ஏதேனும் பிழை ஏற்பட்டால், குறியீடு துணுக்கு அதை கன்சோலில் பதிவு செய்கிறது. குறியீடு துணுக்கு இந்த செயல்பாட்டை உங்கள் பயன்பாட்டின் பிற பகுதிகளுக்கு ஏற்றுமதி செய்கிறது.

எல்லையற்ற உருள் கூறுகளை உருவாக்குதல்

போலித் தரவைப் பெறுவதற்கான தர்க்கத்தை நீங்கள் இப்போது கையாண்டிருக்கிறீர்கள், போலித் தரவைக் காட்டவும், எல்லையற்ற ஸ்க்ரோலிங் செயல்பாட்டைக் கையாளவும் புதிய கூறுகளை உருவாக்கலாம்.

புதிய கோப்பை உருவாக்கவும் InfiniteScroll.vue இல் src/கூறுகள் அடைவு மற்றும் பின்வரும் குறியீட்டைச் சேர்க்கவும்:

 <!-- 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 கூறு.

மின்னஞ்சலில் தொழில் ரீதியாக மன்னிப்பு கேட்பது எப்படி

குறியீடு துணுக்கை இறக்குமதி செய்கிறது ref மற்றும் InfiniteScroll பயன்படுத்தவும் இருந்து செயல்பாடுகள் பார்வை மற்றும் @பார்வை/கோர் , முறையே. துணுக்கை இறக்குமதி செய்கிறது கருத்துகளைப் பெறவும் இருந்து செயல்பாடு getComments.js கோப்பு.

பின்னர், துணுக்கு ஒரு உருவாக்குகிறது பட்டியல்எல் உடன் குறிப்பு ref செயல்பாடு. பட்டியல்எல் எல்லையற்ற உருள் செயல்பாட்டுடன் DOM உறுப்பைக் குறிப்பிடுகிறது.

தி கருத்துகள் காட்டப்படுகின்றன மாறி என்பது பக்கத்தில் காட்டப்படும் கருத்துகளின் எண்ணிக்கையைக் குறிக்கிறது. கருத்துகள் பட்டியல் குறியீட்டு துணுக்கை கொண்டு வரும் கருத்துகளின் வரிசையை வைத்திருக்கிறது கருத்துகளைப் பெறவும் செயல்பாடு.

துணுக்கை வரையறுக்கிறது a கருத்துகள்ToDisplayOnScroll உடன் புதிய கருத்துகளைப் பெறும் ஒத்திசைவற்ற செயல்பாடு கருத்துகளைப் பெறவும் செயல்பாடு மற்றும் அவற்றை ஏற்கனவே உள்ளவற்றுடன் சேர்க்கிறது கருத்துகள் பட்டியல் ஸ்ப்ரெட் ஆபரேட்டருடன் வரிசை ( ... )

இறுதியாக, குறியீடு துணுக்கை அழைக்கிறது InfiniteScroll பயன்படுத்தவும் மூன்று வாதங்களில் எல்லையற்ற ஸ்க்ரோலிங் நடத்தையை செயல்படுத்துவதற்கான செயல்பாடு:

• DOM உறுப்பு ( பட்டியல்எல் ) குறிப்பு என்பது ஆப்ஸ் பயனர் ஸ்க்ரோல் செய்யும் பட்டியலைக் குறிக்கிறது.
• புதிய கருத்துகளைப் பெறுவதைத் தூண்டுவதற்கும் அவற்றைச் சேர்ப்பதற்கும் பயனர் ஸ்க்ரோல் செய்யும் போது ஒரு ஒத்திசைவு செயல்பாடு அழைப்பு கருத்துகள் பட்டியல் .
• பண்புகளுடன் ஒரு விருப்ப கட்டமைப்பு பொருள். அந்த பொருள் {தூரம்: 10} பயனர் பட்டியலின் அடிப்பகுதியில் இருந்து 10 பிக்சல்கள் தொலைவில் இருக்கும்போது புதிய கருத்துகள் ஏற்றப்பட வேண்டும் என்று குறிப்பிடுகிறது.

எல்லையற்ற உருள் கூறுகளைப் பயன்படுத்துதல்

இன் ஸ்கிரிப்ட் பிளாக்கில் எல்லையற்ற ஸ்க்ரோலிங் லாஜிக்கைக் கையாண்ட பிறகு InfiniteScroll கூறு, நீங்கள் டெம்ப்ளேட் தொகுதியில் உள்ளடக்கத்தை வழங்க வேண்டும்.

பின்வரும் குறியீடு தொகுதியை உங்களில் ஒட்டவும் InfiniteScroll கூறு:

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

கருத்துகளின் பட்டியலை வழங்குவதற்குப் பொறுப்பான Vue கூறுக்கான டெம்ப்ளேட்டை இந்தக் குறியீடு தொகுதி வரையறுக்கிறது.

தி

உறுப்பு ஒரு தொகுப்பைக் கொண்டுள்ளது <அது> மூலம் உருவாக்கப்பட்ட கூறுகள் v-for உத்தரவு (பட்டியல்களை வழங்குவதற்கு) , இது மீண்டும் மீண்டும் செய்கிறது கருத்துகள் பட்டியல் வரிசை.

வரிசையில் இருந்து ஒவ்வொரு கருத்தும் ஒரு உள்ள காட்டப்படும் <அது> தரவு இடைக்கணிப்பைப் பயன்படுத்தும் உறுப்பு ( {{ கருத்து }} ) குறியீடு தொகுதி ஒதுக்குகிறது பட்டியல்எல் பற்றிய குறிப்பு

எல்லையற்ற உருள் செயல்பாட்டை செயல்படுத்த.

பின்னர், நீங்கள் பயன்படுத்தலாம் InfiniteScroll உங்களில் உள்ள கூறு app.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> 

மேலே உள்ள குறியீடு தொகுதி இறக்குமதி செய்கிறது InfiniteScroll கூறு மற்றும் ஐகான் கூறு. அது பின்னர் மூடப்பட்டிருக்கும் InfiniteScroll ஒரு கூறு சஸ்பென்ஸ் கூறு.

தி சஸ்பென்ஸ் Vue இல் உள்ள அனைத்து ஒத்திசைவற்ற செயல்பாடுகளையும் தீர்க்கும் என்பதால், ஃபால்பேக் உள்ளடக்கத்தை (ஒரு ஐகான்) வழங்க கூறு உங்களை அனுமதிக்கிறது. InfiniteScroll கூறு.

இப்போது, ​​கட்டளையை இயக்குவதன் மூலம் உங்கள் பயன்பாட்டை முன்னோட்டமிடலாம் npm ரன் dev பயன்பாட்டின் கோப்பகத்தில். கீழே உள்ள படத்திற்கு ஒத்த இடைமுகத்தை நீங்கள் பார்க்க வேண்டும்:



மேலே உள்ள முன்னோட்டம் நீங்கள் அமைக்கும்போது பத்து கருத்துகளைக் காட்டுகிறது கருத்துகள் காட்டப்பட வேண்டும் மாறி 10. நீங்கள் கீழே ஸ்க்ரோல் செய்யும் போது, ​​பயன்பாடு படிக்க அதிக கருத்துகளை ஏற்றுகிறது.

இணைய பயன்பாடுகளில், குறிப்பாக எக்ஸ் மற்றும் டிக்டாக் போன்ற சமூக ஊடக பயன்பாடுகளில், எல்லையற்ற உருள் நுட்பம் பிரபலமானது.

யூ.எஸ்.பி -யிலிருந்து விண்டோஸ் 10 -ஐ புதிய கணினியில் நிறுவுதல்

இந்த நுட்பம், ஆப்ஸ் பயனர்கள் தொடர்ந்து அதிகத் தரவைப் பெறுவதால் அவர்கள் ஈடுபாட்டுடன் இருப்பதை உறுதிசெய்கிறது, அவர்களுக்குப் படிக்கவும், கற்றுக்கொள்ளவும், பார்க்கவும் எப்போதும் விரிவடையும் உள்ளடக்கத்தை வழங்குகிறது, இதனால் அவர்களின் ஆர்வத்தைத் தூண்டுகிறது.

ஸ்லாட்டுகளுடன் Vue கூறுகளை மீண்டும் பயன்படுத்த கற்றுக்கொள்ளுங்கள்

VueUse க்கு கிடைக்கும் useInfiniteScroll கூறு மூலம் எல்லையற்ற உருள் நுட்பத்தை எவ்வாறு செயல்படுத்துவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள்.

நவீன வலைத்தளங்களில், வெவ்வேறு HTML உள்ளடக்கத்துடன் ஒரே கூறுகளை வழங்குவது பொதுவானது. வலை பயன்பாட்டின் வெவ்வேறு பகுதிகளில் இந்த நிலையான உணர்வை அடைய Vue கூறுகளை மீண்டும் பயன்படுத்த கற்றுக்கொள்ளலாம்.