bygga spa, vi stöter ibland på behovet av att visa data med hjälp av tekniken för oändlig rullning — dvs kontinuerligt laddar data när användaren rullar ner på sidan.

ända sedan Intersection Observer API lades till webbläsare har det aldrig varit enklare att bygga en återanvändbar oändlig rullningskomponent. Låt oss lära oss hur vi kan skapa en sådan komponent med hjälp av detta API.

Observera att vi inte kommer att dyka in i Intersection Observer API, så om du inte är bekant med det rekommenderar jag att du läser den här artikeln i förväg.

huvudkonceptet är att placera ett observerbart element i slutet av en lista med visade objekt för att lägga till mer data när användaren når botten av listan.

Vi vill göra det så flexibelt som möjligt, så vi låter våra konsumenter passera vilken mall de vill använda ng-content. Under det lägger vi till ett ankarelement som kommer att fungera som målelementet som vi tittar på.

låt oss skapa Skärningsobservatören:

först skapar vi ett nytt IntersectionObserver som tar emot entries som argument. Denna funktion anropas när det observerade elementet kommer in i visningsområdet.

Vi kan kontrollera elementets synlighetsstatus genom att titta på egenskapen isIntersection. Om isIntersecting är sant, har målelementet blivit minst lika synligt som tröskeln som passerade. Standardtröskeln är 0, vilket betyder att så snart en pixel är synlig kommer återuppringningen att köras.

därefter kallar vi observe() – metoden och skickar det ankarelementet. Detta kommer att initiera observationen av detta element.

stöd för rullbara behållare för stöd för stöd

egenskapen root anger det element som används som visningsområde för att kontrollera målets synlighet. När den är inställd på null är den standard för webbläsarens visningsport.

det finns tillfällen då vi måste ha en rullbar behållare, och då vill vi att behållaren ska fungera som root – elementet. Låt oss stödja denna funktion:

vi lägger till en kontroll för att se om det aktuella värdelementet är en rullbar Behållare. Om det är, ställer vi in det som root – elementet.

slutligen vill vi inte ha minnesläckor i vår applikation, så vi kopplar bort observatören när komponenten förstörs:

det är så enkelt som det.

Låt oss se hur vi använder det:

eller med en rullbar Behållare:

webbläsarstöd

intersection observer API fungerar i de flesta större webbläsare. Om du behöver stödja gamla webbläsare som IE kan du ladda en polyfill eller reserv till rullningshändelsen i runtime.

har du provat Akita än?

Akita är ett av de ledande statshanteringsbiblioteken och har använts i otaliga produktionsmiljöer. Det utvecklas och förbättras ständigt.

oavsett om det är enheter som kommer från servern eller UI-tillståndsdata, har Akita specialbyggda butiker, kraftfulla verktyg och skräddarsydda plugins som hjälper dig att hantera data och negera behovet av massiva mängder standardkod. Vi / Jag rekommenderar starkt att du provar det.

Följ mig på Medium eller Twitter för att läsa mer om Angular, Akita och JS!

Lämna ett svar

Din e-postadress kommer inte publiceras.