Bygg SPAs, vi kommer noen ganger over behovet for å vise data ved hjelp av teknikken for uendelig rulling-dvs. kontinuerlig lasting av data når brukeren ruller nedover siden.Helt siden Intersection Observer API ble lagt til nettlesere, har det aldri vært enklere å bygge en gjenbrukbar uendelig rullekomponent. La oss lære hvordan vi kan lage en slik komponent ved hjelp AV DENNE API.

Merk at vi ikke kommer til å dykke inn I Skjæringspunktet Observer API, så hvis du ikke er kjent med det, anbefaler jeg å lese denne artikkelen på forhånd.

hovedkonseptet er å plassere et observerbart element på slutten av en liste over viste elementer, for å legge til flere data når brukeren når bunnen av listen.

vi ønsker å gjøre det fleksibelt som mulig, så vi lar våre forbrukere passere noen mal de ønsker å bruke ng-content. Under det legger vi til et ankerelement som vil fungere som målelementet vi ser på.

la Oss lage Skjæringsobservatøren:

først lager vi en ny IntersectionObserver som mottar entries som argument. Denne funksjonen vil bli kalt når det observerte elementet kommer inn i visningsporten.

vi kan sjekke elementets synlighetsstatus ved å se påisIntersection egenskapen. HvisisIntersecting er sant, har målelementet blitt minst like synlig som terskelen som ble passert. Standardgrensen er 0, noe som betyr at så snart en piksel er synlig, vil tilbakeringingen bli kjørt.

deretter kaller viobserve() metoden, passerer den ankerelementet. Dette vil starte observasjonen av dette elementet.

🦊 Støtte Rullbare Beholdere

root egenskapen indikerer elementet som brukes som visningsport for å kontrollere synligheten til målet. Når satt til null det som standard til nettleseren view.

Det er tider når vi må ha en rullbar beholder, og da vil vi at beholderen skal fungere somroot – elementet. La oss støtte denne funksjonaliteten:

vi legger til en sjekk for å se om det nåværende vertselementet er en rullbar beholder. Hvis det er, setter vi det somroot – elementet.

Til Slutt vil Vi ikke ha minnelekkasjer i søknaden vår, så vi kobler fra observatøren når komponenten er ødelagt:

Det er så enkelt som det.

La oss se hvordan vi bruker det:

eller med en rullbar beholder:

browser support

skjæringspunktet observer api fungerer i de fleste store nettlesere. Hvis du trenger å støtte gamle nettlesere SOM IE, kan du laste inn en polyfill eller fallback til rullehendelsen i runtime.

🚀 Har Du Prøvd Akita Ennå?

En Av de ledende statlige forvaltningsbibliotekene, Akita, Har blitt brukt i utallige produksjonsmiljøer. Det er stadig utvikling og forbedring.Uansett om det er enheter som kommer fra serveren eller UI-tilstandsdataene, Har Akita spesialbygde butikker, kraftige verktøy og skreddersydde plugins, som hjelper deg med å administrere dataene og negere behovet for massive mengder standardtekstkode. Vi / jeg anbefaler deg å prøve det ut.

Følg Meg På Medium Eller Twitter for å lese Mer Om Angular, Akita OG JS!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.