Bouw SPAs, komen we soms de noodzaak tegen om gegevens weer te geven met behulp van de techniek van oneindig scrollen — dat wil zeggen, continu gegevens laden terwijl de gebruiker naar beneden scrolt.

sinds de Intersection Observer API is toegevoegd aan browsers, is het bouwen van een herbruikbare oneindige scroll component nog nooit zo eenvoudig geweest. Laten we leren hoe we een dergelijke component kunnen maken met behulp van deze API.

merk op dat we niet gaan duiken in de Intersection Observer API, dus als je er niet bekend mee bent, adviseer ik om dit artikel van tevoren te lezen.

het belangrijkste concept is om een waarneembaar element aan het einde van een lijst met weergegeven items te plaatsen, om meer gegevens toe te voegen wanneer de gebruiker de onderkant van die lijst bereikt.

we willen het zo flexibel mogelijk maken, dus we laten onze consumenten elke sjabloon passeren die ze willen gebruiken ng-content. Daaronder voegen we een ankerelement toe dat zal dienen als het doelelement dat we in de gaten houden.

laten we de snijpunt waarnemer maken:

eerst maken we een nieuwe IntersectionObserver die entries als argument ontvangt. Deze functie wordt aangeroepen wanneer het waargenomen element de viewport binnenkomt.

We kunnen de zichtbaarheidsstatus van het element controleren door te kijken naar de eigenschap isIntersection. Als isIntersecting waar is, is het doelelement minstens zo zichtbaar geworden als de drempel die is overschreden. De standaarddrempel is 0, wat betekent dat zodra zelfs maar één pixel zichtbaar is, de callback wordt uitgevoerd.

vervolgens noemen we de observe() methode, waarbij we het ankerelement doorgeven. Dit zal de observatie van dit element in gang zetten.

🦊 ondersteuning voor schuifbare Containers

de eigenschap root geeft het element aan dat wordt gebruikt als viewport voor het controleren van de zichtbaarheid van het doel. Wanneer ingesteld op null wordt standaard de viewport van de browser gebruikt.

Er zijn momenten waarop we een schuifbare container nodig hebben, en dan willen we dat die container fungeert als het root element. Laten we deze functionaliteit ondersteunen:

we voegen een controle toe om te zien of het huidige host element een schuifbare container is. Als dat zo is, stellen we het in als het root element.

tot slot willen we geen geheugenlekken in onze applicatie, dus we zullen de waarnemer loskoppelen als het component vernietigd wordt:

Het is zo eenvoudig als dat.

eens kijken hoe we het gebruiken:

of met een schuifbare container:

browserondersteuning

de intersection observer API werkt in de meeste grote browsers. Als u oude browsers zoals IE moet ondersteunen, kunt u een polyfill of fallback naar het scroll-evenement in runtime Laden.

🚀 hebt u Akita al geprobeerd?

Akita is een van de toonaangevende bibliotheken voor staatsmanagement en is gebruikt in talloze productieomgevingen. Het is voortdurend aan het ontwikkelen en verbeteren.

of het nu entiteiten zijn die van de server komen of UI-statusgegevens, Akita heeft op maat gemaakte winkels, krachtige tools en op maat gemaakte plug-ins, die u helpen de gegevens te beheren en de noodzaak voor enorme hoeveelheden boilerplate-code teniet doen. Wij / ik raad u ten zeerste aan om het uit te proberen.

Volg me op Medium of Twitter om meer te lezen over Angular, Akita en JS!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.