كيفية تنفيذ التمرير اللانهائي في 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 / الأساسية (تقديم خدمات Vue الأساسية).

ستستخدم أكسيوس و @ iconify / vue لجلب البيانات وإضافة الرموز إلى التطبيق الخاص بك. @ vueuse / الأساسية يحتوي على أدوات مساعدة Vue ، بما في ذلك useInfiniteScroll مكون لتحقيق التمرير اللانهائي.

إحضار البيانات الوهمية من JSONPlaceholder API

لتنفيذ وظيفة التمرير اللانهائي ، تحتاج إلى بيانات. يمكنك إما ترميز هذه البيانات بشكل ثابت أو الحصول على بيانات من مصدر واجهة برمجة تطبيقات وهمية مجاني مثل JSON.

الحصول على هذه البيانات من JSONPlaceholder يقلد سيناريوهات الحياة الواقعية ، حيث تحصل معظم تطبيقات الويب على البيانات من قواعد البيانات بدلاً من البيانات المشفرة.

لجلب البيانات من واجهة برمجة التطبيقات لتطبيق 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. يحتوي عنوان URL على معامِلات طلب البحث الأعلى و حذف، والتي يتم إقحامها داخل السلسلة باستخدام القوالب الحرفية (``). يسمح لك هذا بتمرير القيم الديناميكية إلى عنوان URL.

تقوم الدالة بعد ذلك بإرجاع مصفوفة جديدة تتكون من جسم من التعليقات الواردة من نقطة نهاية API باستخدام خريطة وظيفة.

في حالة حدوث أي خطأ ، يقوم مقتطف الشفرة بتسجيله في وحدة التحكم. ثم يقوم مقتطف الشفرة بتصدير هذه الوظيفة إلى أجزاء أخرى من تطبيقك.

الآن بعد أن تعاملت مع منطق جلب البيانات الوهمية ، يمكنك إنشاء مكون جديد لعرض البيانات الوهمية والتعامل مع وظيفة التمرير اللانهائية.

قم بإنشاء ملف جديد InfiniteScroll.vue في ال src / المكونات الدليل وإضافة الكود التالي: