ترقيم الصفحات في Vue.js

مرحبا يا هبر! أقدم لكم ترجمة مقال " ترقيم الصفحات في Vue.js " بقلم ديني هيدريك.

يعمل ترقيم الصفحات على تحسين تجربة المستخدم من خلال السماح للمستخدمين بتصور البيانات في كتل صغيرة أو على الصفحات. لذلك يمكن ترقيم مكون Vue.js ، مما سيسمح لنا بعرض جزء فقط من بياناتنا في المرة الواحدة.



أولاً ، سأضيف قطعة قطعة إلى كائن جافا سكريبت الخاص بي. ثم سأعرض القالب

من بين جميع البيانات المحلية ، أحتاج فقط إلى البيانات - رقم الصفحة.

data(){ return { pageNumber: 0 //   0 } } 

بالنسبة إلى الدعائم (الخصائص) ، يعد نقل البيانات أمرًا إلزاميًا ، لكنني سأأخذ أيضًا وسيطة الحجم لأقصى عدد من السجلات.

 props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 } } 

بالنسبة للتنفيذ ، سأستخدم طرقًا للانتقال إلى الصفحات السابقة (السابقة) واللاحقة (التالية):

 methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; } } 

خاصية محسوبة سريعة لمعرفة عدد الصفحات الموجودة:

 pageCount(){ let l = this.listData.length, s = this.size; //     return Math.ceil(l/s); //  // return Math.floor(l/s); } 

الآن ، خاصية paginatedData المحسوبة هي المكان الذي يتم فيه دمج كل شيء. هذه هي البيانات المصفاة التي سيتم عرضها.

 paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end); } 

الافتتاحية : لقد فعلت شيئًا مريعًا ومرهقًا لنسخ مصفوفة. استخدام شريحة. هو أفضل نهج. شكرا الكسندر Karelas .

ونموذجنا

 <div> <ul> <li v-for="p in paginatedData"> {{p.first}} {{p.last}} {{p.suffix}} </li> </ul> <button @click="prevPage"> Previous </button> <button @click="nextPage"> Next </button> </div> 

أريد أن تعمل الأزرار عندما يتعين عليهم ذلك فقط. بالنسبة للزر prevPage ، سأضيف:

: معطل = "pageNumber == 0"

وبالنسبة لزر الصفحة التالي ، سأضيف:

: معطل = "pageNumber> = عدد الصفحات -1"

عرض توضيحي لمكوني:


في بعض الأحيان يكون من الصعب المبالغة في تقدير الموقف ، ولكن الحدود الفاصلة للصفحات هي وظيفة بسيطة يمكننا تقديمها لمستخدمينا دون بذل الكثير من الجهد.

شكرا للقراءة!

ديني هيدريك هو مطور ويب في USAF يحب وظيفته كثيرًا. بالإضافة إلى تطويره على منصات مختلفة و Vue.js ، عندما يستطيع ، يحب التدوين من حين لآخر. يمكنك متابعته على تويتر علىdennythecoder.