budując uzdrowiska, czasami spotykamy się z potrzebą wyświetlania danych za pomocą techniki nieskończonego przewijania — tj. ciągłego ładowania danych podczas przewijania strony przez użytkownika.

od momentu dodania API Intersection Observer do przeglądarek tworzenie komponentu nieskończonego przewijania wielokrotnego użytku nigdy nie było łatwiejsze. Dowiedzmy się, jak możemy stworzyć taki komponent za pomocą tego API.

zauważ, że nie będziemy zanurkować w Intersection Observer API, więc jeśli nie jesteś z nim zaznajomiony, polecam wcześniej przeczytać ten artykuł.

główną koncepcją jest umieszczenie obserwowalnego elementu na końcu listy wyświetlanych elementów, aby dodać więcej danych, gdy użytkownik znajdzie się na dole tej listy.

chcemy, aby był jak najbardziej elastyczny, więc pozwalamy naszym klientom przekazać dowolny szablon, który chcą, używającng-content. Poniżej dodajemy element kotwicy, który będzie służył jako element docelowy, który oglądamy.

stwórzmy obserwatora przecięcia:

najpierw tworzymy nowyIntersectionObserver, który otrzymujeentries jako swój argument. Funkcja ta zostanie wywołana za każdym razem, gdy obserwowany element wejdzie do widoku.

możemy sprawdzić status widoczności elementu, patrząc na właściwość isIntersection. JeśliisIntersecting jest prawdziwe, element docelowy stał się co najmniej tak widoczny jak próg, który został przekroczony. Domyślnym progiem jest 0, co oznacza, że gdy tylko będzie widoczny nawet jeden piksel, wywołanie zwrotne zostanie uruchomione.

następnie wywołujemy metodę observe() przekazując jej element kotwicy. Spowoduje to rozpoczęcie obserwacji tego elementu.

Support Obsługa przewijalnych kontenerów

właściwośćroot wskazuje element, który jest używany jako viewport do sprawdzania widoczności celu. Po ustawieniu na null domyślnie jest to Widok przeglądarki.

czasami musimy mieć przewijalny kontener, a następnie chcielibyśmy, aby ten kontener działał jako elementroot. Wspierajmy tę funkcjonalność:

dodajemy sprawdzanie, czy bieżący element hosta jest przewijalnym kontenerem. Jeśli tak, ustawiamy go jako elementroot.

wreszcie, nie chcemy wycieków pamięci w naszej aplikacji, więc odłączymy obserwatora, gdy komponent zostanie zniszczony:

to takie proste.

zobaczmy, jak go używamy:

lub z przewijanym kontenerem:

przeglądarka Wsparcie

API obserwatora przecięcia działa w większości głównych przeglądarek. Jeśli chcesz obsługiwać stare przeglądarki, takie jak IE, możesz załadować polyfill lub fallback do zdarzenia przewijania w środowisku wykonawczym.

czy próbowałeś już Akity?

jedna z wiodących bibliotek zarządzania państwem, Akita była używana w niezliczonych środowiskach produkcyjnych. Stale się rozwija i ulepsza.

niezależnie od tego, czy są to jednostki przybywające z serwera, czy dane stanu interfejsu użytkownika, Akita ma niestandardowe sklepy, potężne narzędzia i dostosowane do potrzeb wtyczki, które pomagają zarządzać danymi i negują potrzebę ogromnych ilości kodu boilerplate. Gorąco polecam wypróbować.

Śledź mnie na Medium lub Twitterze, aby przeczytać więcej o Angular, Akita i JS!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.