10+ Perfect React Infinite Scroll komponenta piemērs

Izmēģiniet Mūsu Instrumentu Problēmu Novēršanai

Bezgalīga ritināšana ir neticami noderīgs lietotāja interfeisa modelis, kas nepārtraukti ielādē saturu, lietotājam ritinot uz leju pa plūsmu vai sarakstu. Tas uzlabo pieredzi, samazinot klikšķu skaitu un lapu ielādi, salīdzinot ar tradicionālo numurēto lappušu kārtošanu.

In Reaģēt lietojumprogrammas, bezgalīgu ritināšanu var panākt, pārraugot ritināšanas pozīciju un programmatiski ielādējot vairāk vienumu no API galapunkta vai datu bāzes, kad tuvojas beigām. Tomēr, izmantojot iepriekš sagatavotu Reaģējiet uz bezgalīgiem ritināšanas komponentiem jūs varat izlaist riteņa atkārtotu izgudrošanu un paātrināt attīstību.

Šajā rokasgrāmatā ir apskatīti 10+ atvērtā koda versija Reaģējiet uz bezgalīgām ritināšanas bibliotēkām ar uzstādīšanas instrukcijām, rekvizītu dokumentāciju un lietošanas piemēriem. Atrodiet ideālo komponentu, lai nodrošinātu bezgalīgu, vienmērīgu ritināšanu savā nākamajā Reaģēt projektu.

1. Reaģējiet uz Infinite Scroller

React Infinite Scroller ir spēcīgs React komponents, kas ļauj viegli pievienot lapai vertikālu un horizontālu bezgalīgu ritināšanu. Paredzēts gan attēliem/fotogrāfijām, gan parastajām uz sarakstu balstītām satura plūsmām.

Uzstādīšana

Instalējiet ar npm:

|_+_|

Lietošana

Importējiet un renderējiet |_+_| komponents, pakārtotu elementu nodošana, vairāk satura ielāde, kad |_+_| ir patiess:

|_+_|

Rekvizīti

Prop Tips Noklusējums Apraksts
datu garums Numurs Kopējais vienumu skaits
Nākamais Funkcija Atzvanīt, kad jāielādē vairāk vienumu
ir Vairāk Būla viltus Vai ir vēl ielādējamās preces
iekrāvējs Reaģēt elements Elements, kas renderējams ielādes laikā
ritināšanas slieksnis Stīga '100 pikseļi' Tuvums apakšai, lai sāktu ielādi

Demonstrācija

Skatiet tiešraides demonstrāciju un piemērus GitHub lapas


2. Reage Infinite Scroll Component

Augstas veiktspējas React komponents no @sghall vertikāliem, horizontāliem, apgrieztiem, lappušu un paralaksa bezgalīgas ritināšanas izkārtojumiem.

Uzstādīšana

NPM pakotne:

|_+_|

Lietošana

Importēt un renderēt |_+_| aptīts ap atkārtotiem vienuma elementiem, tiek ielādēts vairāk, kad |_+_|:

|_+_|

Rekvizīti

Prop Tips Noklusējums Apraksts
datu garums Numurs Pašlaik ielādēto vienumu skaits
Nākamais Funkcija Atzvanīt, kad jāielādē vairāk vienumu
ir Vairāk Būla Ja taisnība, var ielādēt vairāk vienumu
iekrāvējs Elements Komponents, kas jāparāda ielādes laikā
ritināšanas slieksnis Stīga '100 pikseļi' Tuvums no apakšas, lai ielādētu vairāk

Demonstrācija

Interaktīvie piemēri GitHub


3. Reaģēt Infinite

Viegls React bezgalīgas ritināšanas komponents no @Canner, kas apstrādā animāciju ielādi, sliekšņa izsekošanu un ritināšanas konteinerus.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Rekvizīti

Prop Tips Noklusējums Apraksts
rokturis Ritiniet Funkcija Aktivizējiet vairāk satura ielādi, atzvanot
elementsAugstums Masīvs [] Elementu pikseļu augstums, lai noteiktu redzamo diapazonu
konteinera augstums Numurs Ritināma konteinera augstums pikseļos
izmantojiet WindowAsScrollContainer Būla viltus Klausieties loga ritināšanu, nevis elementu
displejsApakšāUpward Būla viltus Reverss ritināšanas virziens

Demonstrācija

Skat dzīvi piemēri GitHub lapās.


4. Reaģējiet uz Infinite Scroll Hook

Viegls React āķis bezgalīgai ritināšanai no @demaceo, kas apstrādā ritināšanas notikumus, ielādes aktivizētājus un sliekšņus.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Iespējas

Opcija Tips Obligāti Apraksts
rootMargin Stīga Nospiediet ap elementu, lai sāktu ielādi, pirms tas parādās
slieksnis Numurs Ritinātā procentuālā daļa, lai aktivizētu vairāk ielādi
hasNextPage Būla Ja taisnība, var ielādēt vairāk satura
onLoadMore Funkcija Atzvanīt, kad jāielādē nākamā lapa
iekraušana Būla Ja taisnība, komponents tiek ielādēts nākamajā lapā

Demonstrācija

Skat GitHub piemēriem.


5. React-Virtualized Infinite Loader

Augstas veiktspējas bezgalīga ielāde reaģētvirtualizētām tabulām, sarakstiem un režģiem, kas vienmērīgi apstrādā mainīgus augstumus.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Rekvizīti

Prop Tips Obligāti Apraksts
bērniem Funkcija Jāatveido režģis, saraksts vai tabula
irRowLoaded Funkcija Norāda, vai rinda ir ielādēta
ielādētMoreRows Funkcija Pieprasa ielādēt papildu rindas
rindu skaits Numurs Rindu skaits sarakstā
minimālais Partijas lielums Numurs Minimālais ielādējamo rindu skaits vienā ielādes reizē
slieksnis Numurs Ritinot līdz norādītajam slieksnim, ielādējiet nākamo rindu grupu

Demonstrācija

Skat piemēri ar reaģēt-virtualizētu


6. Reaģējiet uz Infinite Hit

Bezgalīga ritināšanas bibliotēka uzņēmumiem no @sonaye vietnē GitHub, kas koncentrējas uz elastīgu datu ienešanu.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Rekvizīti

Prop Tips Obligāti Apraksts
atnest Funkcija Metode vairāku vienumu iegūšanai
slieksnis Numurs Pikseļu tuvums apakšai, lai aktivizētu nolasīšanu
ierobežojums Numurs Atgriežamo vienumu skaits vienā ielādes reizē
iekrāvējs Komponents Elements, kas jāparāda nolasīšanas laikā
ir Vairāk Būla Ja visas preces jau ir ielādētas
useCapture Būla Ritināšanas klausītājs izmanto uztveršanas fāzi

Demonstrācija

Skat GitHub piemēriem.


7. React-Easy-Infinite-Scroll

Īpaši viegls React bezgalīgas ritināšanas āķis, kas vienmērīgi apstrādā ritināšanas notikumus, sliekšņus un virzienus.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Iespējas

Opcija Tips Obligāti Apraksts
darbība Funkcija Atzvanīt, kad jāielādē nākamā lapa
ir Vairāk Būla Ja tā ir patiesa, ir vairāk satura
slieksnis Numurs Procentuālā daļa, kas ritināta, lai aktivizētu ielādi
scrollContainer Elements Elements ritināšanas klausītāja pievienošanai
virziens Stīga 'augšup' vai 'lejup' ritināšanas virziens
atkāpties Būla Iespējot atlēcošo ritināšanas apdarinātāju

8. Reaģējiet uz Infinite Scroll Trigger

Viegls iesaiņojums, lai aktivizētu ielādes darbības no komponenta “react-infinite-scroll-component”.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Iespējas

Opcija Tips Obligāti Apraksts
darbība Funkcija Atzvanīt, kad jāielādē nākamie vienumi
kompensēt Numurs Agrīna aktivizētāja nobīdes pikseļi no apakšas

Paredzēts lietošanai ar reaģēt-bezgalīgs-scroll-komponents


9. React List Infinite Scroll

Deklaratīva bezgalīga ritināšana reaģēšanas sarakstiem no @coder1011.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Rekvizīti

Prop Tips Obligāti Apraksts
fetchData Funkcija Vairāk datu iegūšanas metode
renderItem Funkcija Atveido katru vienumu
garums Numurs Kopējais vienumu skaits
ierobežojums Numurs Ienesamo vienumu skaits vienā kravā
platums Stīga Izvēles fiksēta platuma stils

Demonstrācija

Skat piemēri vietnē GitHub .


10. Reage Window InfiniteLoader

Bezgalīgas ielādes komponenti mainīga izmēra elementiem reaģēšanas logā.

Uzstādīšana

|_+_|

Lietošana

|_+_|

Rekvizīti

Prop Tips Obligāti Apraksts
bērniem Funkcija Jāatveido saraksts, režģis vai tabula
isItemLoaded Funkcija Ja tiek ielādēta prece indeksā
vienumu skaits Numurs Kopējais vienumu skaits
ielādētVairāk vienumu Funkcija Ielādē vairāk priekšmetu
minimālais Partijas lielums Numurs Minimālais ienesamo vienumu skaits vienā ielāde
slieksnis Numurs Sliekšņa signāls, kad jāielādē nākamā partija

Demonstrācija

Skat piemēri vietnē GitHub.


Tātad jums ir vairāk nekā 10 brīnišķīgi React bezgalīgas ritināšanas un slinkas ielādes komponenti, ko izpētīt nākamajai lietojumprogrammai. Izmantojot pārliecinošus piemērus, rekvizītu dokumentāciju un lietošanas instrukcijas, ātri ievietojiet to savā lietotnē, lai iespējotu augstas veiktspējas bezgalīgas plūsmas.

Skatīt Arī: