budování lázní, někdy se setkáváme s potřebou zobrazovat data pomocí techniky nekonečného rolování-tj.

od té doby, co bylo rozhraní Intersection Observer API přidáno do prohlížečů, nebylo vytváření opakovaně použitelné komponenty infinite scroll nikdy snazší. Naučme se, jak můžeme vytvořit takovou komponentu pomocí tohoto API.

Všimněte si, že se nebudeme ponořit do rozhraní Intersection Observer API, takže pokud s ním nejste obeznámeni, doporučuji si tento článek přečíst předem.

hlavním konceptem je umístit pozorovatelný prvek na konec seznamu zobrazených položek, aby bylo možné přidat další data, když uživatel dosáhne spodní části tohoto seznamu.

chceme, aby se jak flexibilní, jak je to možné, a tak jsme se nechali naše spotřebitele projít libovolnou šablonu chtějí pomocí ng-content. Pod ním přidáme kotevní prvek, který bude sloužit jako cílový prvek, který sledujeme.

Pojďme vytvořit Křižovatku Pozorovatel:

za Prvé, jsme se vytvořit nový IntersectionObserver, který obdrží entries jako svůj argument. Tato funkce bude volána vždy, když pozorovaný prvek vstoupí do výřezu.

stav viditelnosti prvku můžeme zkontrolovat pomocí vlastnosti isIntersection. Pokud isIntersecting je pravda, cílový prvek se stal alespoň tak viditelným jako práh, který byl předán. Výchozí prahová hodnota je 0, což znamená, Jakmile je viditelný i jeden pixel, bude spuštěno zpětné volání.

dále voláme metodu observe() a předáme jí kotevní prvek. Tím se zahájí pozorování tohoto prvku.

🦊 Podporu Rolovací Kontejnery

root vlastnost označuje prvek, který je použit jako výřez pro kontrolu viditelnosti cíle. Pokud je nastavena na null, výchozí hodnota je výřez prohlížeče.

jsou chvíle, kdy budeme muset mít posuvný kontejner, a pak bychom chtěli, aby tento kontejner fungoval jako prvek root. Pojďme podpořit tyto funkce:

přidat kontrolu, zda aktuální hostitele prvek je posuvný kontejner. Pokud ano, nastavíme jej jako prvek root.

nakonec nechceme v naší aplikaci úniky paměti, takže odpojíme pozorovatele, když součást zničena:

je to tak jednoduché.

Pojďme se podívat, jak můžeme použít:

Nebo s rolovací obal:

Podpora Prohlížeče

Průsečík Pozorovatel API funguje ve většině hlavních prohlížečů. Pokud potřebujete podporovat staré prohlížeče, jako je IE, můžete za běhu načíst polyfill nebo fallback k události scroll.

🚀 už jste vyzkoušeli Akitu?

jedna z předních knihoven státní správy, Akita byla použita v nesčetných výrobních prostředích. Neustále se vyvíjí a zlepšuje.

Ať už je to subjekty, kteří přijedou ze serveru nebo UI státu údajů, Akita má vlastní-postavený obchody, výkonné nástroje, a šitá na míru pluginy, které vám pomohou spravovat data a negovat potřebu obrovské množství často používaný kód. Vřele doporučuji vyzkoušet si to.

Follow me on Medium or Twitter to read more about Angular, Akita and JS!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.