Building SPAs, vi støder undertiden på behovet for at vise data ved hjælp af teknikken til uendelig rulning — dvs.løbende indlæsning af data, når brugeren ruller ned på siden.lige siden Crossing Observer API blev føjet til bro.sere, har det aldrig været nemmere at opbygge en genanvendelig uendelig rullekomponent. Lad os lære, hvordan vi kan oprette en sådan komponent ved hjælp af denne API.

Bemærk, at vi ikke vil dykke ned i Crossing Observer API, så hvis du ikke er bekendt med det, anbefaler jeg at læse denne artikel på forhånd.

hovedkonceptet er at placere et observerbart element i slutningen af en liste over viste elementer for at tilføje flere data, når brugeren når bunden af listen.

Vi ønsker at gøre det så fleksibelt som muligt, så vi lader vores forbrugere passere enhver skabelon, de ønsker, ved hjælp afng-content. Under det tilføjer vi et ankerelement, der vil tjene som det målelement, vi ser.

lad os oprette Krydsobservatøren:

først opretter vi en ny IntersectionObserver som modtager entries som argument. Denne funktion kaldes, når det observerede element kommer ind i visningen.

Vi kan kontrollere elementets synlighedsstatus ved at se påisIntersection ejendom. Hvis isIntersecting er sandt, er målelementet blevet mindst lige så synligt som den tærskel, der blev passeret. Standardtærsklen er 0, hvilket betyder, at så snart et punkt er synligt, vil tilbagekaldelsen blive kørt.

dernæst kalder viobserve() – metoden, der passerer ankerelementet. Dette vil indlede observationen af dette element.

list Support rullbare containere

root egenskaben angiver det element, der bruges som visning til kontrol af målets synlighed. Når den er indstillet til null, er den standard.

der er tidspunkter, hvor vi skal have en rullbar beholder, og så vil vi gerne have, at containeren skal fungere som root element. Lad os understøtte denne funktionalitet:

Vi tilføjer en check for at se, om det aktuelle værtselement er en rullbar beholder. Hvis det er, indstiller vi det som root element.

endelig ønsker vi ikke hukommelseslækager i vores applikation, så vi afbryder observatøren, når komponenten ødelægges:

det er så simpelt som det.

lad os se, hvordan vi bruger det:

eller med en rullbar beholder:

2-understøttelse

krydsobservatørens API fungerer i de fleste større bro.sere. IE, kan du indlæse en polyfill eller fallback til rullehændelsen i runtime.

har du prøvet Akita endnu?

et af de førende statsstyringsbiblioteker, Akita er blevet brugt i utallige produktionsmiljøer. Det udvikler og forbedrer sig konstant.

uanset om det er enheder, der ankommer fra server-eller UI-tilstandsdata, har Akita specialbyggede butikker, kraftfulde værktøjer og skræddersyede plugins, som hjælper dig med at administrere dataene og negere behovet for enorme mængder kedelpladekode. Vi / Jeg kan varmt anbefale dig at prøve det.

Følg mig på Medium eller kvidre for at læse mere om Angular, Akita og JS!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.