हम कोणीय सीडीके से आभासी स्क्रॉलिंग के लिए अपनी रणनीति लिखते हैं

नमस्ते!

कोणीय सीडीके में, सातवें संस्करण में एक आभासी स्क्रॉल दिखाई दिया ।

यह बहुत अच्छा काम करता है जब प्रत्येक तत्व का आकार समान होता है - और बॉक्स के ठीक बाहर। हम बस पिक्सेल में आकार निर्धारित करते हैं और इंगित करते हैं कि कंटेनर को किस तत्व तक स्क्रॉल करना चाहिए, क्या इसे आसानी से करना है, और हम वर्तमान तत्व के सूचकांक की सदस्यता भी ले सकते हैं। हालांकि, क्या होगा अगर तत्वों का आकार बदल जाए? इसके लिए, VirtualScrollStrategy में VirtualScrollStrategy इंटरफ़ेस प्रदान किया गया है, जिसे लागू करके हम अपनी सूची में काम करने के लिए स्क्रॉल सिखाएंगे।

मेरे मामले में, मोबाइल प्रस्तुति के लिए एक कैलेंडर बनाना आवश्यक था, जिसे लगातार स्क्रॉल किया जा सकता है, और एक महीने में हफ्तों की संख्या हमेशा अलग होती है। आइए जानने की कोशिश करें कि वर्चुअल स्क्रॉलिंग स्ट्रैटेजी क्या है और अपना खुद का लिखें।

आकार की गणना

जैसा कि आप जानते हैं, हर 28 साल में कैलेंडर दोहराया जाता है।

ऐसा तब किया जाता है जब आप इस बात का ध्यान नहीं रखते हैं कि वर्ष लीप वर्ष नहीं है, यदि यह 100 से विभाज्य है, लेकिन 400 से नहीं। हमारे मामले में, हमें 1900 से पहले और 2100 के बाद के वर्षों की आवश्यकता नहीं है। जनवरी को सोमवार को पड़ने के लिए, हम 1900 से एक भी खाते के लिए शुरू करेंगे और हम करेंगे 196 साल पीछे हटें। इस प्रकार, हमारे कैलेंडर में 7 दोहराए जाने वाले चक्र होंगे। 1900 में 29 फरवरी की अनुपस्थिति चोट नहीं पहुंचाएगी, क्योंकि यह गुरुवार होगा।

गणना स्क्रॉल के दौरान की जाएगी, इसलिए गणना जितनी सरल होगी, प्रदर्शन उतना ही अधिक होगा। ऐसा करने के लिए, हम एक लूप स्थिरांक बनाएंगे, जिसमें 12 संख्याओं में से 28 सरणियाँ होंगी, जो प्रत्येक महीने की ऊँचाई के लिए ज़िम्मेदार हैं:

 function getCycle(label: number, week: number): ReadonlyArray<ReadonlyArray<number>> { return Array.from({length: 28}, (_, i) => Array.from( {length: 12}, (_, month) => label + weekCount(i, month) * week, ), ); } 

इनपुट में, इस फ़ंक्शन को महीने के शीर्षक की ऊंचाई और एक सप्ताह की ऊंचाई (64 और 48 पिक्सल, क्रमशः ऊपर जीआईएफ के लिए) प्राप्त होती है। एक महीने में हफ्तों की संख्या हमें इस तरह के एक सरल कार्य की गणना करने में मदद करेगी:

 function weekCount(year: number, month: number): number { const firstOfMonth = new Date(year + STARTING_YEAR, month, 1); const lastOfMonth = new Date(year + STARTING_YEAR, month + 1, 0); const days = lastOfMonth.getDate() + (firstOfMonth.getDay() || 7) - 1; return Math.ceil(days / 7); } 

परिणाम स्थिर const CYCLE = getCycle(64, 48); में संग्रहीत है const CYCLE = getCycle(64, 48); ।

हम एक फ़ंक्शन लिखेंगे जो आपको चक्र के अंदर वर्ष और महीने द्वारा ऊंचाई की गणना करने की अनुमति देता है:

 function reduceCycle(lastYear: number = 28, lastMonth: number = 12): number { return CYCLE.reduce( (total, year, yearIndex) => yearIndex <= lastYear ? total + year.reduce( (sum, month, monthIndex) => yearIndex < lastYear || (yearIndex === lastYear && monthIndex < lastMonth) ? sum + month : sum, 0, ) : total, 0, ); } 

इस फ़ंक्शन को तर्कों के बिना कॉल करने से, हमें एक चक्र का आकार मिलता है, और भविष्य में हम अपनी सीमा से किसी भी वर्ष के किसी भी महीने के लिए कंटेनर के शीर्ष से इंडेंट पा सकते हैं।

VirtualScrollStrategy

आप टोकन का उपयोग करके अपनी रणनीति को वर्चुअल स्क्रॉल में सबमिट कर सकते हैं
VIRTUAL_SCROLL_STRATEGY :

 { provide: VIRTUAL_SCROLL_STRATEGY, useClass: MobileCalendarStrategy, }, 

हमारी कक्षा को VirtualScrollStrategy इंटरफ़ेस लागू करना चाहिए:

 export interface VirtualScrollStrategy { scrolledIndexChange: Observable<number>; attach(viewport: CdkVirtualScrollViewport): void; detach(): void; onContentScrolled(): void; onDataLengthChanged(): void; onContentRendered(): void; onRenderedOffsetChanged(): void; scrollToIndex(index: number, behavior: ScrollBehavior): void; } 

attach और detach फ़ंक्शंस शुरू करने और बंद करने के लिए जिम्मेदार हैं। हमारे लिए सबसे महत्वपूर्ण onContentScrolled पद्धति को हर बार उपयोगकर्ता द्वारा कंटेनर को स्क्रॉल करने के लिए कहा जाता है (अनावश्यक requestAnimationFrame से बचने के लिए उपयोग किया जाता है। अनावश्यक कॉल से बचने के लिए आंतरिक रूप से उपयोग किया जाता है)।

onDataLengthChanged को कहा जाता है जब onDataLengthChanged में तत्वों की संख्या बदल गई है - हमारे मामले में ऐसा कभी नहीं होगा। एक नियम के रूप में, ऐसी स्थिति में, कुल ऊंचाई और वर्तमान में प्रदर्शित तत्वों को फिर से attach आवश्यक होगा, लगभग वही जो attach फ़ंक्शन में किया जाना चाहिए।

onContentRendered और onRenderedOffsetChanged को तब बुलाया जाता है जब तत्वों का प्रदर्शित हिस्सा बदलता है और पहले तत्व में परिवर्तन होता है। CdkVirtualScrollViewport इन विधियों तक पहुँचता है जब इसे प्रदर्शित वस्तुओं की एक नई श्रेणी दी जाती है और क्रमशः उनमें से पहले के लिए इंडेंट किया जाता है। हमें इसकी आवश्यकता नहीं है, क्योंकि हाथ से CdkVirtualScrollViewport तरीकों को कॉल करने की कोई आवश्यकता नहीं है। यदि आपको इसकी आवश्यकता है, तो onContentRendered अंदर आप एक नए इंडेंट की गणना कर सकते हैं, और onRenderedOffsetChanged - इसके विपरीत, परिणामस्वरूप इंडेंट के लिए दृश्य तत्वों की श्रेणी।

हमारे लिए दूसरी महत्वपूर्ण विधि - scrollToIndex - आपको कंटेनर को वांछित तत्व तक स्क्रॉल करने की अनुमति देती है, और इसके विपरीत - scrolledIndexChange - वर्तमान दृश्य तत्व को ट्रैक करना संभव बना देगा।

शुरू करने के लिए, हम सभी सरल तरीकों का निर्माण करेंगे, और फिर मुख्य कोड पर विचार करेंगे:

 export class MobileCalendarStrategy implements VirtualScrollStrategy { private index$ = new Subject<number>(); private viewport: CdkVirtualScrollViewport | null = null; scrolledIndexChange = this.index$.pipe(distinctUntilChanged()); attach(viewport: CdkVirtualScrollViewport) { this.viewport = viewport; this.viewport.setTotalContentSize(CYCLE_HEIGHT * 7); this.updateRenderedRange(this.viewport); } detach() { this.index$.complete(); this.viewport = null; } onContentScrolled() { if (this.viewport) { this.updateRenderedRange(this.viewport); } } scrollToIndex(index: number, behavior: ScrollBehavior): void { if (this.viewport) { this.viewport.scrollToOffset(this.getOffsetForIndex(index), behavior); } } // ... } 

स्क्रॉल के साथ काम करने के लिए, हमें इंडेंट द्वारा तत्व के इंडेक्स को प्राप्त करने और इसके विपरीत इंडेक्स द्वारा इंडेंट प्राप्त करने में सक्षम होना चाहिए। हमारे द्वारा लिखा गया कार्य reduceCycle पहले कार्य के लिए उपयुक्त है:

 private getOffsetForIndex(index: number): number { const month = index % 12; const year = (index - month) / 12; return this.computeHeight(year, month); } private computeHeight(year: number, month: number): number { const remainder = year % 28; const remainderHeight = reduceCycle(remainder, month); const fullCycles = (year - remainder) / 28; const fullCyclesHeight = fullCycles * CYCLE_HEIGHT; return fullCyclesHeight + remainderHeight; } 

यही है, इंडेक्स द्वारा ऊंचाई पाने के लिए, हम पाते हैं कि कितने पूर्ण 28 साल के चक्र वर्तमान तारीख के लिए फिट हैं, और फिर हम दिए गए महीने तक अपने सरणी को जोड़ते हैं। रिवर्स ऑपरेशन कुछ अधिक जटिल है:

 private getIndexForOffset(offset: number): number { const remainder = offset % CYCLE_HEIGHT; const years = ((offset - remainder) / CYCLE_HEIGHT) * 28; let accumulator = 0; for (let year = 0; year < CYCLE.length; year++) { for (let month = 0; month < CYCLE[year].length; month++) { accumulator += CYCLE[year][month]; if (accumulator - CYCLE[year][month] / 2 > remainder) { return Math.max((years + year) * MONTHS_IN_YEAR + month, 0); } } } return 196; } 

जब हम पूर्ण 28-वर्षीय चक्रों की कुल ऊंचाई प्राप्त करते हैं, तो हम सभी महीनों की कुल ऊंचाई को इकट्ठा करते हुए, सरणी पर पुनरावृत्ति करेंगे, जब तक कि यह वांछित इंडेंट से अधिक न हो जाए। उसी समय, हम न केवल उच्चतम दृश्यमान महीने को खोजने के लिए प्रत्येक महीने ( CYCLE[year][month] / 2 ) की आधी से अधिक ऊंचाई की जांच करेंगे, लेकिन ऊपरी सीमा के सबसे करीब। स्क्रॉल पूरा होने के बाद महीने की शुरुआत में चिकनी घुमा के लिए भविष्य में इसकी आवश्यकता होगी।

यह सबसे महत्वपूर्ण कार्य लिखने के लिए बना हुआ है जो दृश्य क्षेत्र के तत्वों को प्रस्तुत करने के लिए जिम्मेदार है:

 private updateRenderedRange(viewport: CdkVirtualScrollViewport) { const offset = viewport.measureScrollOffset(); const viewportSize = viewport.getViewportSize(); const {start, end} = viewport.getRenderedRange(); const dataLength = viewport.getDataLength(); const newRange = {start, end}; const firstVisibleIndex = this.getIndexForOffset(offset); const startBuffer = offset - this.getOffsetForIndex(start); if (startBuffer < BUFFER && start !== 0) { newRange.start = Math.max(0, this.getIndexForOffset(offset - BUFFER * 2)); newRange.end = Math.min( dataLength, this.getIndexForOffset(offset + viewportSize + BUFFER), ); } else { const endBuffer = this.getOffsetForIndex(end) - offset - viewportSize; if (endBuffer < BUFFER && end !== dataLength) { newRange.start = Math.max(0, this.getIndexForOffset(offset - BUFFER)); newRange.end = Math.min( dataLength, this.getIndexForOffset(offset + viewportSize + BUFFER * 2), ); } } viewport.setRenderedRange(newRange); viewport.setRenderedContentOffset(this.getOffsetForIndex(newRange.start)); this.index$.next(firstVisibleIndex); } 

चलो सब कुछ क्रम में विचार करें।

हम वर्तमान इंडेंटेशन, कंटेनर आकार, दिखाए गए वर्तमान रेंज और वस्तुओं की कुल संख्या के CdkVirtualScrollViewport पूछते हैं। तब हम पहले दिखाई देने वाले तत्व और बहुत पहले प्रदान किए गए तत्व पर इंडेंट पाते हैं।

उसके बाद, हमें यह समझने की आवश्यकता है कि वर्तमान तत्वों की सीमा को कैसे बदलना है और उनमें से सबसे पहले इंडेंट करना है, ताकि वर्चुअल स्क्रॉल तत्वों को सुचारू रूप से लोड कर सके और ऊंचाई को पुन: गणना करते समय चिकोटी न हो। ऐसा करने के लिए, हमारे पास BUFFER स्थिरांक है, जो BUFFER कि हम दिखाई देने वाले तत्वों से कितने पिक्सेल ऊपर और नीचे दिखाई देते हैं। मेरे मामले में, मैं 500px का उपयोग करता हूं। यदि शीर्ष इंडेंट बफर से छोटा है और ऊपर अधिक तत्व हैं, तो हम बफर को डबल कवर करने के लिए शीर्ष पर पर्याप्त तत्व जोड़कर सीमा बदल देंगे। हम सीमा के अंत को भी समायोजित करते हैं। चूंकि हम ऊपर स्क्रॉल करते हैं - एक बफ़र सबसे नीचे है। एक ही बात है, लेकिन विपरीत दिशा में हम नीचे स्क्रॉल करते समय प्रदर्शन करते हैं।

फिर हम CdkVirtualScrollViewport नई श्रेणी प्रदान करते हैं और इसके पहले तत्व के लिए इंडेंट पर विचार करते हैं। वर्तमान दृश्यमान सूचकांक को पास करें।

के उपयोग

हमारी रणनीति तैयार है। घटक प्रदाताओं में जोड़ें, जैसा कि ऊपर दिखाया गया है, और टेम्पलेट में CdkVirtualScrollViewport का उपयोग करें:

 <cdk-virtual-scroll-viewport (scrolledIndexChange)="activeMonth = $event" > <section *cdkVirtualFor="let month of months; templateCacheSize: 10" > <h1>{{month.name}}</h2> <our-calendar [month]="month"></our-calendar> </section> </cdk-virtual-scroll-viewport> 

यह स्क्रॉल के अंत में अगले महीने के लिए एक चिकनी मोड़ का एहसास करता है। बारीकियां हैं।

तथ्य यह है कि उंगली जारी होने के बाद मोबाइल उपकरणों पर स्क्रॉल करना जारी रहता है। इसलिए, हमारे लिए उस पल को समझना मुश्किल होगा जब चालू महीने को संरेखित करना आवश्यक हो। इसके लिए हम RxJs का उपयोग करते हैं। touchstart ईवेंट की touchstart और अगले touchend प्रतीक्षा करते हैं। इसकी शुरुआत के बाद, हम यह जानने के लिए दौड़ ऑपरेटर का उपयोग करते हैं कि क्या स्क्रॉल जारी है, या यदि उंगली बिना त्वरण के जारी की गई थी। यदि SCROLL_DEBOUNCE_TIME अवधि के दौरान कोई स्क्रॉल ईवेंट नहीं होता है, तो हम वर्तमान महीने को संरेखित करते हैं। अन्यथा, हम तब तक प्रतीक्षा करते हैं जब तक अवशिष्ट स्क्रॉल बंद नहीं हो जाता। इस मामले में, आपको takeUntil(touchstart$) को जोड़ने की जरूरत है, क्योंकि जड़त्वीय स्क्रॉल को एक नए स्पर्श के साथ रोका जा सकता है और फिर पूरी धारा को शुरुआत में वापस आना चाहिए:

 const touchstart$ = touchStartFrom(monthsScrollRef.elementRef.nativeElement); const touchend$ = touchEndFrom(monthsScrollRef.elementRef.nativeElement); // Smooth scroll to closest month after scrolling is done touchstart$ .pipe( switchMap(() => touchend$), switchMap(() => race( monthsScrollRef.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME), ).pipe( debounceTime(SCROLL_DEBOUNCE_TIME * 2), take(1), takeUntil(touchstart$), ), ), takeUntil(this.destroy$), ) .subscribe(() => { monthsScrollRef.scrollToIndex(this.activeMonth, 'smooth'); }); 

यहां यह ध्यान दिया जाना चाहिए कि scrollToIndex सीडीके में स्क्रॉलिंग scrollToIndex के लिए एक देशी कार्यान्वयन का उपयोग किया जाता है, और यह सफारी में काम नहीं करता है। आप इसे स्क्रॉल करके लिख सकते हैं। हमारे द्वारा स्क्रॉल requestAnimationFrame गए रणनीति के अंदर हमने जो रणनीति requestAnimationFrame है, requestAnimationFrame अंदर requestAnimationFrame माध्यम से अपनी चिकनी स्क्रॉल लिखकर।

निष्कर्ष

DI और Angular टीम की समझदारी की बदौलत, हम अपने लिए वर्चुअल स्क्रॉल को लचीले ढंग से कस्टमाइज़ करने में सक्षम थे। पहली नज़र में, अलग-अलग ऊंचाइयों वाले तत्वों के लिए एक आभासी स्क्रॉल को लागू करना एक कठिन काम की तरह लगता है।

हालांकि, जब प्रत्येक तत्व की ऊंचाई की गणना करना संभव है, तो आपकी रणनीति लिखना काफी सरल हो गया। मुख्य बात यह है कि यह गणना जल्दी से किया जाता है, क्योंकि इसे अक्सर कहा जाएगा। यदि आपको बड़ी संख्या में कार्ड प्रदर्शित करने की आवश्यकता है, जिस पर उनकी ऊंचाई को प्रभावित करने वाले तत्व हो सकते हैं या नहीं हो सकते हैं, तो ऊंचाई प्राप्त करने के लिए एक प्रभावी एल्गोरिदम पर विचार करें और अपनी रणनीति लिखने से डरो मत।