मैंने वास्तव में अनुकूली स्लाइडर (हिंडोला) कैसे किया

अच्छे दिन, प्रिय पाठकों और लेखकों!

आज मैं आपको बताऊंगा कि कैसे प्रोजेक्ट ने मुझे एक अनुकूली स्लाइडर बनाने के कार्य का सामना किया और इसके बारे में क्या आया

लेख के बारे में और यह किसके लिए है

मैं यह लेख इसलिए नहीं लिख रहा हूं क्योंकि मैं चाहता हूं कि समुदाय इस समस्या पर प्रतिक्रिया दे, बल्कि इसलिए भी क्योंकि लेख के सवालों को हल करना मेरे लिए वेब पर स्लाइडर की अनुकूलनशीलता को समझने के लिए मौलिक लगता है। यदि किसी ने पहले से ही ऐसे घटक लिखे हैं, तो कृपया उसी तरह के अनुभवों का जवाब दें और साझा करें

क्या हुआ और किन उपकरणों का उपयोग किया गया, इसके बारे में थोड़ा सा

एक प्रतिक्रिया आवेदन में, आपको एक हिंडोला बनाने की आवश्यकता है (इसके बाद मैं इस नाम का उपयोग करूंगा), जिनमें से तत्व किसी भी आकार के स्क्रीन पर सामंजस्यपूर्ण रूप से देखते हैं। कई सीमाएँ हैं:

1. तत्व की अधिकतम चौड़ाई 150 पीएक्स है
2. उपकरण का इस्तेमाल किया - प्रतिक्रिया उल्लू हिंडोला
3. हिंडोला के लिए कंटेनर का अधिकतम आकार 1190 पीएक्स है
4. विभिन्न स्क्रीन के लिए पैडिंग प्रॉपर्टी के संकेतक भी हैं (कंटेनर के दृश्य भाग की चौड़ाई को प्रभावित करता है) और मार्जिन (5 मिलियन पिक्सल के तत्वों के बीच)
5. हिंडोला साइकिल में जाना चाहिए
   और अन्य शर्तें जो लेख के विषय को प्रभावित नहीं करती हैं

हिंडोला के यांत्रिकी पर पाचन

कई हिंडोला (रिएक्ट उल्लू हिंडोला अपवाद नहीं है) दिखाने के लिए विशेष सक्रिय वर्ग का उपयोग करते हैं जो उन तत्वों का वर्णन करता है जो वर्तमान में स्क्रीन पर प्रदर्शित होते हैं।

स्क्रीन पर एक अनंत लूप प्रदर्शित करने के लिए, पहले और अंतिम तत्वों को डुप्लिकेट किया जाता है (यांत्रिकी और इस डबिंग की समस्याएं एक अलग लेख के लिए एक विषय हैं)।

गुणों को विशेष वस्तुओं द्वारा वर्णित किया जाता है, हम उत्तरदायी वस्तु में रुचि लेंगे, जो गुणों को पुन: सौंपने के लिए जिम्मेदार है।

काम के यांत्रिकी पर शेष डेटा समाधान का वर्णन करने के दौरान स्पष्ट होगा।

पहली समस्याएं

सबसे पहले सब कुछ सुचारू रूप से चला गया - तत्वों को स्वयं लिखा और स्टाइल किया गया था, पूरे हिंडोला के मूल गुणों को वर्तनी दी गई थी। प्रॉपर्टी सेट करते समय शुरू हुई समस्याएं {पाश: सच}

हिंडोला अपर्याप्त रूप से लूपिंग है

जब सूची के अंत तक स्क्रॉल किया गया, तो हिंडोला में मुक्त स्थान बना रहा और कुछ समय के लिए इसके माध्यम से स्क्रॉल किया गया।

कारण तत्व की अधिकतम चौड़ाई थी, उनकी संख्या के अनुरूप नहीं। एक ठोस उदाहरण कंटेनर की चौड़ाई 1190 पीएक्स है, जिसमें तत्वों की संख्या 3 है।

दूसरे शब्दों में, हिंडोला 3 तत्वों को 1190px तक खींचने की उम्मीद करता है, और वे 150px से बड़े नहीं हो सकते।

वस्तुओं की संख्या बढ़ाना

समस्या एक अलग कोण पर ले जाती है: यदि कंटेनर में बहुत अधिक तत्व हैं, तो उनकी चौड़ाई बहुत छोटी हो जाती है (और उनके अंदर सामग्री है!) यदि मैं न्यूनतम-चौड़ाई की संपत्ति सेट करता हूं, तो कुछ स्क्रीन आकारों पर तत्व एक-दूसरे पर क्रॉल करते हैं, मार्जिन की अनदेखी करते हैं, जो शर्तों का उल्लंघन करता है; ।

हम अनुकूलन क्षमता की शर्तों को संक्षेप में प्रस्तुत करते हैं

1. स्क्रीन पर तत्वों की संख्या स्क्रीन के आकार के अनुपात से कम होनी चाहिए
   तत्व की न्यूनतम चौड़ाई - अन्यथा न्यूनतम चौड़ाई के तत्व भी स्क्रीन पर फिट नहीं होंगे।
2. तत्वों की अनुमानित संख्या के लिए स्क्रीन आकार का अनुपात अधिकतम अनुमानित लंबाई से अधिक नहीं होना चाहिए, अन्यथा लूपिंग के साथ एक समस्या है।
3. ऊपर वर्णित शर्तों को किसी भी स्क्रीन आकार (330px से 1190px तक) के लिए मिलना चाहिए।

हम प्रोग्रामर के रूप में समस्या का समाधान करते हैं

यदि आप समस्या को क्रमिक रूप से देखते हैं, तो यह स्पष्ट है कि आपको कुछ छोड़ना होगा, मेरे मामले में यह तत्व की न्यूनतम चौड़ाई थी।

अनुकूलन क्षमता की शर्तों को पूरा करने के लिए कंटेनर के सभी स्क्रीन के लिए तत्व की न्यूनतम चौड़ाई क्या होनी चाहिए?

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

100px में परिणाम मेरे अनुरूप नहीं था, क्योंकि यह मुझे तत्व की सभी सामग्री को फिट करने की अनुमति नहीं देता है। इसलिए, हम खोज जारी रखते हैं जब तक कि हम सही मूल्य नहीं पाते हैं और बलिदान करने के लिए और क्या चाहते हैं।

उपशीर्षक याद है? खोज करने के लिए, फ़ंक्शन लिखें

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

प्राप्त वस्तु को ध्यान में रखते हुए, आप 336px से 452px तक संक्रमण में एक बड़ी छलांग देख सकते हैं।
मैंने अनुकूलन क्षमता को 36px तक सीमित करने का एक दृढ़ इच्छाशक्ति वाला निर्णय लिया।

हम अनुकूली वस्तु का वर्णन करते हैं

ऐसा लगता है कि समस्या हल हो गई है, लेकिन ऐसा समाधान केवल यह साबित करता है कि शर्तों का अनुपालन 336px से स्क्रीन के लिए संभव है , लेकिन विधि का वर्णन नहीं करता है। लेकिन अलग-अलग स्थितियां हैं जो मुझे अनुकूलन क्षमता के साथ किसी वस्तु के उत्पादन में सीमित करती हैं
खुद के लिए स्वीकार किए जाने के बाद कि नुकसान के बिना किसी तत्व की न्यूनतम चौड़ाई 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; } 

प्रकाशन के दिन, सब कुछ तार्किक दिखता है, और मैं हिंडोला में त्रुटि को पुन: पेश नहीं कर सका - सब कुछ संभवतः इरादा के अनुसार काम करता है।

आपके ध्यान के लिए धन्यवाद, आपकी टिप्पणियों और टिप्पणियों की प्रतीक्षा कर रहा है!