كيف فعلت شريط التمرير حقا التكيف (دائري)

يوم جيد ، أيها القراء والكتاب الأعزاء!

اليوم سوف أخبركم كيف واجهني المشروع بمهمة تصنيع شريط التمرير التكيفي وما الذي جاء منه

حول المقال ولمن هو

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

قليلا عن ما حدث والأدوات المستخدمة

في تطبيق React ، ستحتاج إلى عمل دائري (فيما يلي سأستخدم هذا الاسم) ، حيث تبحث عناصره بشكل متناغم على الشاشة من أي حجم. هناك العديد من القيود:

1. الحد الأقصى لعرض العنصر هو 150 بكسل
2. أداة مستعملة - رد فعل البومة كاروسيل
3. الحد الأقصى لحجم الحاوية للدوران هو 1190 بكسل
4. هناك أيضًا مؤشرات لخاصية الحشو لشاشات مختلفة (تؤثر على عرض الجزء المرئي من الحاوية) والهامش (بين العناصر على الأقل 5 بكسل)
5. يجب أن يذهب دائري في دورات
   وغيرها من الشروط التي لا تؤثر على موضوع المقال

الانغماس على ميكانيكا دائري

تستخدم العديد من العناصر الدائرية (React Owl Carousel ليست استثناءً) الفئة النشطة الخاصة لإظهار العناصر التي يتم عرضها حاليًا على الشاشة.

لعرض حلقة لا نهائية على الشاشة ، يتم تكرار العناصر الأولى والأخيرة (تُعد آليات ومشكلات الدبلجة موضوعًا لمقال منفصل).

يتم وصف الخصائص بواسطة كائنات خاصة ، وسنكون مهتمين بالكائن المتجاوب ، وهو المسؤول عن إعادة تعيين الخصائص.

ستكون بقية البيانات الخاصة بميكانيكا العمل واضحة في سياق وصف الحل.

المشاكل الأولى

في البداية سار كل شيء بسلاسة - تم كتابة العناصر نفسها ومنمقتها ، وتم توضيح الخصائص الأساسية للدائرة بالكامل. بدأت المشاكل عند تعيين الخاصية {loop: true}

دائري هو حلقات غير كافية

عند التمرير إلى نهاية القائمة ، بقيت المساحة الحرة في الكاروسيل وكانت تتصفحها لبعض الوقت.

كان السبب هو الحد الأقصى لعرض العنصر ، وليس بما يتوافق مع عددهم. مثال ملموس هو عرض الحاوية 1190 بكسل ، مع تعيين عدد العناصر على 3.

بمعنى آخر ، يتوقع الكاروسيل أن تمتد 3 عناصر إلى 1190 بكسل ، ولا يمكن أن تصبح أكبر من 150 بكسل.

زيادة عدد العناصر

تأخذ المشكلة زاوية مختلفة: إذا كان هناك عدد كبير جدًا من العناصر في الحاوية ، يصبح عرضها أصغر من اللازم (ويوجد محتوى بداخلها!) إذا قمت بتعيين خاصية min-width ، فعندئذٍ في بعض أحجام الشاشة ، تزحف العناصر على بعضها البعض ، متجاهلة الهامش ، الذي ينتهك الشروط .

نلخص شروط التكيف

1. يجب أن يكون عدد العناصر على الشاشة أقل من نسبة حجم الشاشة إلى
   الحد الأدنى لعرض العنصر - وإلا لن يتم احتواء عناصر الحد الأدنى للعرض على الشاشة.
2. يجب ألا تتجاوز نسبة حجم الشاشة إلى العدد المقدر للعناصر الحد الأقصى للطول المقدر ، وإلا فهناك مشكلة في التكرار.
3. يجب الوفاء بالشروط الموضحة أعلاه لأي حجم شاشة (من 330 بكسل إلى 1190 بكسل).

نحن نحل المشكلة كمبرمجين

إذا تعاملت مع المشكلة بالتتابع ، فمن الواضح أنك يجب أن تتخلى عن شيء ما ، في حالتي كان الحد الأدنى لعرض العنصر.

ما ينبغي أن يكون الحد الأدنى لعرض العنصر بحيث يتم استيفاء شروط القدرة على التكيف لجميع شاشات الحاوية؟

//       const getBackTrace = (minScreen = 300, maxElementWidth = 150) => { let backTrace = {} for (let minElementWidth = maxElementWidth; minElementWidth > 0; minElementWidth--){ //            //     backTrace for(let screen = minScreen; screen <= 1100; screen++){ let elementCount = screen / minElementWidth | 0 if((screen / elementCount) > maxElementWidth){ backTrace[minElementWidth] = screen break } } } for(let key in backTrace){ //        ,      if (backTrace[key - 1] == undefined){ backTrace.result = key - 1 return backTrace } } } // getBackTrace(300, 150).result = 100 

النتيجة في 100 بكسل لم تناسبني ، لأنها لا تسمح لي بتلائم جميع المحتويات في العنصر. لذلك ، نواصل البحث حتى نجد القيمة الصحيحة ونبحث عن أي شيء آخر للتضحية.

تذكر العنوان الفرعي؟ للبحث ، اكتب وظيفة

 const getMinScreen = (minWidth = 300, maxWidth = 767, maxElementWidth = 150) => { let research = [] //  ,          // getBackTrace,       for(let min = minWidth; min < maxWidth; min++){ let { result } = getBackTrace(min, maxElementWidth) research.push({result, min}) } //          "  "  return research .reduce((acc, curr, idx, arr) => { let obj = {} let {min, result} = curr obj[min] = result if(idx == 0) return obj if(arr[idx-1].result == result){ return {...acc} } else { return {...acc, ...obj} } }, {}) } /* Returned object {300: 100, 303: 101, 306: 102, 309: 103, 312: 104, 315: 105, 318: 106, 321: 107, 324: 108, 327: 109, 330: 110, 333: 111, 336: 112, 452: 113, 456: 114, 460: 115, 464: 116, 468: 117, 472: 118, 476: 119, 480: 120}   480    */ 

بالنظر إلى الكائن الذي تم الحصول عليه ، يمكنك رؤية قفزة كبيرة في الانتقال من 336 بكسل إلى 452 بكسل.
لقد اتخذت قرارًا قويًا بالإرادة للحد من القدرة على التكيف إلى 36 بكسل.

وصفنا الكائن التكيفي

يبدو أنه قد تم حل المشكلة ، لكن هذا الحل يثبت فقط أن الامتثال للشروط ممكن للشاشات من 336 بكسل ، لكنه لا يصف الطريقة. ولكن هناك شروطًا مختلفة تقيدني في إنتاج كائن بخصائص قابلية التكيف
بعد أن قبلت بنفسي أن الحد الأدنى لعرض عنصر بدون خسائر يمكن أن يكون 107 بكسل ، مع تغيير قيمة الهامش ، توصلت إلى المؤشرات التالية:

الشيء الوحيد المتبقي هو جمع البيانات المستلمة في كومة الذاكرة المؤقتة وتنفيذ الكائن التكيفي:

 getResponsiveOwlItems = () => { let responsive = {}; responsive[0] = {items: 2, nav: false} // 112 = 107 (minimal div) + 5 (margins) let itemMinWidthReference = 112; const getOneWidth = deviceWidth => deviceWidth / itemMinWidthReference | 0 // 1190 - container width for(let i = itemMinWidthReference * 3 + 20; i <= 1190; i += itemMinWidthReference){ // .container padding > 768 90px + padding 90(.container) // .container padding < 768 40px + padding -40(.container) // +20px stagePadding let padding = i > 767 ? 200 : 20 if(i > (468 + padding)) { itemMinWidthReference = 117 } if(i > (767 + padding)) { itemMinWidthReference = 127 } let items = getOneWidth(i - padding) let nav = i > 700 ? true : false let margin = 5; if (i > 468){ margin = 10 } if (i > 767){ margin = 15 } responsive[i.toString()] = {items, nav, margin} //      itemMinWidthReference i = i - (i % itemMinWidthReference) + 1 } return responsive; } 

في يوم النشر ، يبدو كل شيء منطقيًا ، ولم أتمكن من إعادة إنتاج الخطأ في الكاروسيل - ربما يعمل كل شيء على النحو المنشود.

شكرا لاهتمامكم ، في انتظار تعليقاتكم وتعليقاتكم!