גלילה אינסופית שימושית כאשר אתה צריך להציג מערכי נתונים גדולים ביישום שלך. למד כיצד ליישם את זה ב-Vue.

גלילה אינסופית היא טכניקה שבה אתה יכול להשתמש כדי להציג יותר תוכן כאשר משתמש האפליקציה שלך גולל מטה בעמוד. זה מבטל את הצורך בעימוד ומאפשר למשתמשי האפליקציה להמשיך לגלול בין מערכי נתונים גדולים.

הגדרת אפליקציית Vue שלך

כדי לעקוב אחר הדרכה זו, אתה צריך הבנה בסיסית של Vue 3 ו-JavaScript. אתה צריך לדעת איך להתמודד בקשות HTTP עם Axios.

כדי להתחיל ללמוד איך ליישם גלילה אינסופית, צור אפליקציית Vue חדשה על ידי הפעלת הפריטים הבאים npm הפקודה בספרייה המועדפת עליך:

npm create vue

במהלך הגדרת הפרויקט, Vue יבקש ממך לבחור הגדרה מראש עבור האפליקציה שלך. בחר לא עבור כל התכונות, מכיוון שלא תזדקק לתוספות לאפליקציה שלך.

לאחר שיצרת את האפליקציה החדשה, נווט אל ספריית האפליקציה והפעל את הפעולות הבאות npm פקודה להתקנת החבילות הדרושות:

npm install axios @iconify/vue @vueuse/core

ה npm הפקודה מתקינה שלוש חבילות: אקסיוס (עבור בקשות HTTP), @iconify/vue (לשילוב אייקונים קל ב-Vue), ו @vueuse/core (המציע כלי שירות חיוניים של Vue).

instagram viewer

אתה תשתמש אקסיוס ו @iconify/vue כדי להביא נתונים ולהוסיף סמלים לאפליקציה שלך. @vueuse/core מכיל כלי עזר של Vue, כולל השתמש בInfiniteScroll רכיב להשגת גלילה אינסופית.

שליפת נתוני דמה מ-API של JSONPlaceholder

כדי ליישם את פונקציית הגלילה האינסופית, אתה צריך נתונים. אתה יכול לקודד את הנתונים האלה בצורה קשה או לקבל נתונים ממקור API מזויף בחינם כמו JSONPlaceholder.

קבלת הנתונים הללו מ-JSONPlaceholder מחקה תרחישים מהחיים האמיתיים, מכיוון שרוב יישומי האינטרנט מקבלים נתונים מבסיסי נתונים במקום נתונים מקודדים.

כדי להביא נתונים מ-API עבור אפליקציית Vue שלך, צור תיקיה חדשה ב- src ספרייה ושמות לה API. בתיקייה זו, צור קובץ JavaScript חדש והדבק את הקוד הבא:

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

קטע הקוד מורכב מפונקציה אסינכרונית לקבלת הערות מנקודת הקצה של ה-API " https://jsonplaceholder.typicode.com/comments". לאחר מכן הוא מייצא את הפונקציה.

כדי להסביר יותר, קטע הקוד מתחיל בייבוא ​​ה- אקסיוס סִפְרִיָה. לאחר מכן הקוד מגדיר את getComments פונקציה עם שני ארגומנטים: מקסימום ו לְהַשְׁמִיט.

ה getComments פונקציה בתים את axios.get() שיטה שמבצעת בקשת GET לכתובת ה-URL. כתובת האתר מכילה פרמטרים של שאילתה מקסימום ו לְהַשְׁמִיט, אשר משולבים בתוך המחרוזת באמצעות מילות תבנית (``). זה מאפשר לך להעביר ערכים דינמיים לכתובת האתר.

לאחר מכן הפונקציה מחזירה מערך חדש המורכב מה- גוּף מההערות שהתקבלו מנקודת הקצה של ה-API באמצעות מַפָּה פוּנקצִיָה.

אם מתרחשת שגיאה כלשהי, קטע הקוד רושם אותו למסוף. לאחר מכן, קטע הקוד מייצא את הפונקציה הזו לחלקים אחרים של האפליקציה שלך.

כעת, לאחר שטיפלת בלוגיקה של שליפת נתוני דמה, תוכל ליצור רכיב חדש כדי להציג את נתוני הדמה ולטפל בפונקציית הגלילה האינסופית.

צור קובץ חדש InfiniteScroll.vue בתוך ה src/רכיבים ספרייה והוסף את הקוד הבא: