Rakennuskylpylöissä, joskus törmäämme tarpeeseen näyttää tietoja äärettömän vierityksen tekniikalla — eli jatkuvasti lataamalla tietoja käyttäjän vierittäessä sivua.

siitä lähtien, kun Intersection Observer API lisättiin selaimiin, uudelleenkäytettävän infinite scroll-komponentin rakentaminen ei ole koskaan ollut helpompaa. Opetellaan, miten voimme luoda tällaisen komponentin tämän API: n avulla.

huomaa, että emme aio sukeltaa risteyskohtaan Observer API, joten jos et tunne sitä, suosittelen lukemaan tämän artikkelin etukäteen.

pääkäsitteenä on sijoittaa havainnoitavissa oleva elementti näytettävien kohteiden luettelon loppuun, jotta tietoja voidaan lisätä, kun käyttäjä saavuttaa luettelon pohjan.

haluamme tehdä siitä mahdollisimman joustavan, joten annamme kuluttajillemme haluamansa mallin ng-content. Sen alle lisätään ankkurielementti, joka toimii kohdeelementtinä, jota tarkkailemme.

luodaan Risteyshavaitsija:

ensin luodaan uusi IntersectionObserver, joka saa entries argumentikseen. Tätä funktiota kutsutaan aina, kun havaittu Elementti saapuu kuvaikkunaan.

elementin näkyvyystilan voi tarkistaa katsomalla isIntersection ominaisuutta. Jos isIntersecting pitää paikkansa, kohdeelementti on tullut vähintään yhtä näkyväksi kuin ohitettu kynnys. Oletuskynnys on 0, eli heti kun yksikin pikseli on näkyvissä, takaisinkutsu suoritetaan.

seuraavaksi kutsutaan observe() menetelmää, jonka ohi se on ankkurielementti. Tämä aloittaa tämän elementin havainnoinnin.

🦊 tuki vieritettäviä säiliöitä

root ominaisuus ilmaisee elementin, jota käytetään näköaukkona kohteen näkyvyyden tarkistamiseen. Kun asetuksena on null, oletusarvo on selaimen näköaukko.

on aikoja, jolloin tarvitaan vieritettävää säiliötä, ja silloin toivoisimme, että säiliö toimisi root elementtinä. Tukekaamme tätä toimintoa:

lisäämme tarkistuksen nähdäksemme, onko nykyinen isäntäelementti vieritettävä säiliö. Jos se on, asetamme sen root alkuaineeksi.

lopulta emme halua sovellukseemme muistivuotoja, joten irrotamme havaitsijan komponentin tuhoutuessa:

se on niin yksinkertaista.

katsotaan, miten sitä käytetään:

tai vieritettävän kontin kanssa:

selaintuki

intersection observer API toimii useimmissa suurimmissa selaimissa. Jos haluat tukea vanhoja selaimia, kuten IE, voit ladata polyfill-tiedoston tai varasuunnitelman vieritystapahtumaan runtime-ohjelmassa.

🚀 Oletko jo kokeillut Akitaa?

johtaviin valtionhallinnon kirjastoihin kuuluva Akita on ollut käytössä lukemattomissa tuotantoympäristöissä. Se kehittyy ja paranee koko ajan.

olipa kyse palvelimelta saapuvista kokonaisuuksista tai UI state-datasta, akitalla on mittatilaustyönä tehtyjä varastoja, tehokkaita työkaluja ja räätälöityjä laajennuksia, joiden avulla voit hallita tietoja ja tehdä tyhjäksi massiivisen boilerplate-koodin tarpeen. Suosittelemme, että kokeilet sitä.

Seuraa minua Mediumilla tai Twitterissä ja lue lisää Angulasta, Akitasta ja JS: stä!