, uneori întâlnim nevoia de a afișa date folosind tehnica derulării infinite-adică încărcarea continuă a datelor pe măsură ce utilizatorul derulează pagina.

De când API-ul intersecție Observer a fost adăugat la browsere, construirea unei componente de derulare infinite reutilizabile nu a fost niciodată mai ușoară. Să învățăm cum putem crea o astfel de componentă folosind acest API.

rețineți că nu ne vom scufunda în API-ul intersecție Observer, deci dacă nu sunteți familiarizați cu acesta, vă recomand să citiți acest articol în prealabil.

conceptul principal este de a plasa un element observabil la sfârșitul unei liste de elemente afișate, pentru a adăuga mai multe date atunci când utilizatorul ajunge în partea de jos a listei respective.

vrem să facem cât mai flexibil posibil, așa că lăsăm consumatorii noștri să treacă orice șablon doresc folosindng-content. Mai jos, adăugăm un element de ancorare care va servi drept element țintă pe care îl urmărim.

să creăm Observatorul intersecției:

în primul rând, creăm un nouIntersectionObserver care primeșteentries ca argument. Această funcție va fi apelată ori de câte ori elementul observat intră în portul de vizualizare.

putem verifica starea de vizibilitate a elementului uitându-ne la proprietateaisIntersection. Dacă isIntersecting este adevărat, elementul țintă a devenit cel puțin la fel de vizibil ca pragul care a fost trecut. Pragul implicit este 0, ceea ce înseamnă că imediat ce este vizibil chiar și un pixel, apelul invers va fi rulat.

apoi, numimobserve() metoda, trecând-o elementul de ancorare. Aceasta va iniția observarea acestui element.

containere derulabile cu suport de suport

proprietatearoot indică elementul care este utilizat ca port de vizualizare pentru verificarea vizibilității țintei. Când este setat la null este implicit la portul de vizualizare al browserului.

sunt momente când va trebui să avem un container derulabil, și apoi ne-am dori ca acel container să acționeze caroot element. Să susținem această funcționalitate:

adăugăm o verificare pentru a vedea dacă elementul gazdă curent este un container derulabil. Dacă este, îl setăm ca elementroot.

în cele din urmă, nu vrem scurgeri de memorie în aplicația noastră, așa că vom deconecta Observatorul când componenta a distrus:

este la fel de simplu.

Să vedem cum îl folosim:

sau cu un container derulabil:

suport pentru browser

API-ul intersecție observer funcționează în majoritatea browserelor majore. Dacă trebuie să acceptați browsere vechi, cum ar fi IE, puteți încărca un polyfill sau o rezervă la evenimentul de derulare în timpul rulării.

XV ați încercat Akita încă?

una dintre cele mai importante biblioteci de management de stat, Akita a fost folosit în nenumărate medii de producție. Este în continuă dezvoltare și îmbunătățire.

fie că este vorba de entități care sosesc de la server sau de date de stat UI, Akita are magazine personalizate, instrumente puternice, și plugin-uri personalizate, care vă ajută să gestionați datele și neagă necesitatea unor cantități masive de cod boilerplate. Noi / am foarte recomandăm să-l încercați.

Urmați-mă pe mediu sau Twitter pentru a citi mai multe despre Angular, Akita și JS!

Lasă un răspuns

Adresa ta de email nu va fi publicată.