Épületfürdők, néha találkozunk azzal, hogy az adatokat a végtelen görgetés technikájával kell megjeleníteni — azaz folyamatosan betölteni az adatokat, amikor a felhasználó lefelé görget az oldalon.

amióta az Intersection Observer API-t hozzáadták a böngészőkhöz, egy újrafelhasználható végtelen görgető komponens felépítése még soha nem volt ilyen egyszerű. Tanuljuk meg, hogyan hozhatunk létre ilyen összetevőt az API használatával.

ne feledje, hogy nem fogunk belemerülni az Intersection Observer API-ba, ezért ha nem ismeri, javasoljuk, hogy előzetesen olvassa el ezt a cikket.

a fő koncepció egy megfigyelhető elem elhelyezése a megjelenített elemek listájának végén, annak érdekében, hogy további adatokat adjon hozzá, amikor a felhasználó eléri a lista alját.

a lehető legrugalmasabbá akarjuk tenni, ezért hagyjuk, hogy a fogyasztók bármilyen sablont átadjanak a ng-content használatával. Alatta hozzáadunk egy horgonyelemet, amely a megfigyelt célelemként szolgál.

Hozzuk létre a metszéspont megfigyelőt:

először létrehozunk egy újIntersectionObserveramely argumentumként megkapja aentries értéket. Ezt a függvényt akkor hívják meg, amikor a megfigyelt elem belép a nézetablakba.

az elem láthatósági állapotát a isIntersection tulajdonság segítségével ellenőrizhetjük. Ha a isIntersecting igaz, akkor a célelem legalább annyira láthatóvá vált, mint a küszöbérték. Az alapértelmezett küszöb 0, ami azt jelenti, hogy amint egy pixel is látható, a visszahívás fut.

ezután hívjuk aobserve() módszert, átadva a horgony elemet. Ez kezdeményezi ennek az elemnek a megfigyelését.

A görgethető tárolók támogatása

aroot tulajdonság azt az elemet jelöli, amelyet a cél láthatóságának ellenőrzéséhez nézetablakként használnak. Ha null értékre van állítva, akkor alapértelmezés szerint a böngésző nézetablaka.

vannak esetek, amikor szükségünk lesz egy görgethető tárolóra, majd azt szeretnénk, ha ez a tároló a root elemként működne. Támogassuk ezt a funkciót:

hozzáadunk egy csekket, hogy az aktuális gazdagép elem görgethető tároló-e. Ha igen, akkor a root elemként állítjuk be.

végül nem akarunk memóriaszivárgást az alkalmazásunkban, ezért leválasztjuk a megfigyelőt, amikor az összetevő megsemmisül:

Ez ilyen egyszerű.

nézzük meg, hogyan használjuk:

vagy görgethető tárolóval:

böngésző támogatás

az intersection Observer API a legtöbb nagy böngészőben működik. Ha támogatnia kell a régi böngészőket, például az IE-t, betölthet egy polyfill-et vagy tartalékot a görgetési eseményhez futásidőben.

6 Próbáltad már az Akitát?

az egyik vezető Állami Menedzsment könyvtár, az Akita számtalan termelési környezetben használatos. Folyamatosan fejlődik és fejlődik.

legyen szó akár a szerverről érkező entitásokról, akár a felhasználói felület állapotadatairól, az Akita egyedi építésű üzletekkel, hatékony eszközökkel és testre szabott bővítményekkel rendelkezik, amelyek segítenek az adatok kezelésében és kiküszöbölik a hatalmas mennyiségű kazánkód szükségességét. Mi / én nagyon ajánlom, hogy próbálja ki.

Kövess a Medium-on vagy a Twitteren, hogy többet tudj meg az Angular-ról, az Akitáról és a JS-ről!

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.