كيفية تقديم قائمة تصل إلى 10000 عناصر بشكل صحيح.
تتيح تقنية التحميل المنسد من Infinite للمستخدمين التمرير والعرض أمام عدد كبير من كتل المحتوى. هذه الطريقة هي الحفاظ على تحميل محتوى جديد أثناء التمرير لأسفل.
عند استخدام التمرير كطريقة أساسية لاكتشاف البيانات ، يمكن أن يسمح للمستخدمين بالبقاء على صفحة الويب لفترة أطول وزيادة مشاركة المستخدم. مع شعبية وسائل التواصل الاجتماعي ، يستهلك المستخدمون كمية كبيرة من البيانات. يوفر التمرير اللاسلكي وسيلة فعالة للسماح للمستخدمين بتصفح كميات هائلة من المعلومات دون الحاجة إلى الانتظار حتى يتم تحميل الصفحة.
إذا قمنا بتغيير طريقة تفكيرنا ، إذا كان هناك 10000 مكونات عمود مستقيم على الصفحة ، فكيف يمكننا استخدام 5 مكونات لتقديم الصفحة بأكملها ديناميكيًا؟
حلفي تحسين القوائم الطويلة ، لدينا العديد من الحلول ، مثل الترحيل ، والتحميل كسول ، وما إلى ذلك. هناك تفاعل جيد للغاية (صورة chrysanthemum) ، حتى يتمكن المستخدم من الانتظار. هذه الخطة هي أيضا ناجحة جدا.
كيف تجد طريقة أخرى؟
1. في تطبيق صفحات واحدة ، هل يمكننا تحليل مخطط الترحيل مرة واحدة ، مع 10 عناصر لكل صفحة ، و 10 عناصر لكل صفحة
2. هل يمكننا استخدام قوس لدعم طول القائمة بأكمله عند تمرير الشاشة إلى الموضع المقابل وتقديم العشرة المقابلة
مشكلة وميضعندما ننفذ هذه الفكرة ، ستكون هناك مشكلة في الخفقان. نظرًا لأن أحداث التمرير متكررة ، نجد أن العناصر التي نراها تقوم باستمرار بإعادة طلاءها ، لأننا نجد العشرة عناصر تحتاج إلى تقديمها في كل قطع ، ثم استبدالها مباشرة.
الفكرة هنا هي أنه عندما أرى موضع الشاشة ، سأقدم 10 ثم 10 إلى أعلى وأسفل ، مع ما مجموعه 30. عند التحكم في العرض ، أستبدل دائمًا العناصر العلوية أو السفلية ، حتى لا يتم إعادة طلاء الجزء الذي نرى في الوسط. إنه مجرد إعادة رسم البيانات التي تم تقديمها مسبقًا.
مبدأقم بتنفيذ مكون يمكنه عرض قائمة من العناصر N ذات حجم نافذة ثابتة من 5 عناصر: أي في أي وقت ، لا يوجد سوى 5 حاويات DOM على عناصر Scroll N Infinite.
<ul> <li style = transform: translate3d (0px ، 0px ، 0px) ؛> ... </li> <li style = transform: translate3d (0px ، 60px ، 0px) ؛> ... </li> </ul>
على سبيل المثال: 100 عنصر ، يتم عرض 5 على الصفحة الرئيسية. تهيئة [0،1،2،3،4] هذه 5 <li> يجب أن يتم تقديمها. عندما أقوم بالتمرير لأسفل قليلاً ، [1،2،3،4،5] يجب تقديم هذه <li>. في هذا الوقت ، لا تحل محل بشكل مباشر ، يجب استبدال مصطلحات الفرق فقط. يجب أن يكون الهيكل [5،1،2،3،4]. نظرًا لأنه وضعه مطلق ، سيتم فصله عن الدفق القياسي. لن تؤثر إعادة الرسم الفردي على الأربعة الأخرى ، وبالتالي تحسين الأداء.
كيفية تنفيذها <! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width ، scale scale = 1.0> <meta http-equiv = x-ua content = ie = edge> <script src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> وثيقة </title> <style> الجسم ، UL ، li {margin: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ } ul {الموضع: النسبي ؛ } ul li {position: absolute ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 31 بكسل ؛ Line-Leight: 32px ؛ Border-Bottom: 1PX Solid #CCC ؛ } </style> </head> <body> <ul> </ul> </body> <script> // Total Container var list = [] ؛ // عناصر في Range Visual Var showlist = [] ؛ // عرض حاوية var renderlist = [] ؛ // ارتفاع كل حاوية var lineHeight = 32 // تهيئة 1000 عنصر لـ (var i = 0 ؛ i <1000 ؛ i ++) {list.push ({id: i ، text: 'th' + (i + 1) + 'elements' ، top: i lineHeight ، bottom: (i + 1) * lineHight}) 1000 * lineHeight+'px') // أوجد عرض الوظيفة (أعلى ، أسفل) الحاوية الأولية {showlist = [] // mark التي يتم تكرار البيانات مع المقدمة بعد تقديمها ، لن يتم تقديم هذا الجزء بشكل متكرر var seameindex = [] <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i ؛ استراحة؛ }}} var range = 0 // ابحث عن العناصر التي سيتم عرضها لأعلى ولأسفل على التوالي في العنصر الموجود حاليًا ، حتى يصل العدد الإجمالي إلى 35 بينما (المدى <100 && showlist. في ذلك الوقت ، استبدل العنصر غير المميز إذا (Renderlist.includes (List [CurrentIndex - Range] .ID)) {// sheamIndex.push (currentIndex -range) sameindex.unshift (renderlist.indexof (list [currentIndex - range] .id))} oll {showlist.unshift (list [currentex - range]) ! = 0) {if (renderlist.includes (list [currentIndex + Range] .ID)) {sameIndex.push (renderlist.indexof (list [currentIndex + range] .id))} 0) {for (var i = 0 ؛ i <redrenclist.length ؛ i ++) {if (! sameindex.includes (i) && showlist.length) {renderlist [i] = showlist.shift (). id $ ('ul li'). + 'px ، 0px) ؛')}}} else {// تهيئة القائمة للمرة الأولى Renderlist = showlist.map (function (val) {return val.id}) render. قائمة [KEY] .ID + LIST [KEY] .TEXT + '</li>))})} console.log (Renderlist)} // عرض العرض الأول () $ (window) .scroll (function (e) {render ()}) ؛ </script> </html> تودوالنقاط الرئيسية
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.