10+ Esempio di componente Perfect React Infinite Scroll

Prova Il Nostro Strumento Per Eliminare I Problemi

Lo scorrimento infinito è un modello di interfaccia utente incredibilmente utile che carica continuamente il contenuto mentre l'utente scorre un feed o un elenco. Ciò migliora l'esperienza riducendo i clic e i caricamenti di pagina rispetto alla tradizionale impaginazione numerata.

In Reagire applicazioni, è possibile ottenere uno scorrimento infinito monitorando la posizione di scorrimento e caricando a livello di codice più elementi da un endpoint API o da un database quando si avvicina la fine. Tuttavia, sfruttando il pre-made Reagisci a componenti di scorrimento infiniti puoi evitare di reinventare la ruota e accelerare lo sviluppo.

Questa guida esplora oltre 10 open source Reagisci infinite librerie di scorrimento con istruzioni di installazione, documentazione sugli oggetti di scena ed esempi di utilizzo. Trova il componente perfetto per consentire uno scorrimento infinito e senza interruzioni nel tuo prossimo Reagire progetto.



1. Reagisci allo scroller infinito

React Infinite Scroller è un robusto componente React per aggiungere facilmente lo scorrimento infinito verticale e orizzontale a una pagina. Progettato sia per immagini/foto che per normali feed di contenuti basati su elenchi.

Installazione

Installa con npm:

|_+_|

Utilizzo

Importa ed esegui il rendering di |_+_| componente, passaggio di elementi secondari, caricamento di più contenuti quando |_+_| è vero:

|_+_|

Oggetti di scena

Puntello Tipo Predefinito Descrizione
dataLength Numero Numero totale di articoli
Prossimo Funzione Richiamata quando è necessario caricare più elementi
ha di più Booleano falso Se ci sono più elementi da caricare
caricatore Elemento di reazione Elemento da sottoporre a rendering durante il caricamento
scrollThreshold Corda '100px' Vicinanza al fondo per iniziare il caricamento

Dimostrazione

Visualizza demo dal vivo ed esempi su Pagine GitHub


2. Reagisci al componente Scorrimento infinito

Un componente React ad alte prestazioni di @sghall per disposizioni di scorrimento infinite verticali, orizzontali, invertite, impaginate e parallasse.

Installazione

Pacchetto NPM:

|_+_|

Utilizzo

Importa e visualizza |_+_| avvolto attorno a elementi oggetto ripetuti, caricandone altri quando |_+_|:

|_+_|

Oggetti di scena

Puntello Tipo Predefinito Descrizione
dataLength Numero Conteggio degli elementi attualmente caricati
Prossimo Funzione Richiamata quando è necessario caricare più elementi
ha di più Booleano Se vero, è possibile caricare più elementi
caricatore Elemento Componente da mostrare durante il caricamento
scrollThreshold Corda '100px' Vicinanza dal basso per caricare di più

Dimostrazione

Esempi interattivi su GitHub


3. Reagisci all'infinito

Componente di scorrimento infinito React leggero di @Canner che gestisce il caricamento di animazioni, il monitoraggio delle soglie e i contenitori di scorrimento.

Installazione

|_+_|

Utilizzo

|_+_|

Oggetti di scena

Puntello Tipo Predefinito Descrizione
handleScroll Funzione Attiva il caricamento di più callback di contenuto
elementoAltezza Vettore [] Altezza in pixel degli elementi per determinare la portata visibile
contenitoreAltezza Numero Altezza del contenitore scorrevole in pixel
useWindowAsScrollContainer Booleano falso Ascolta lo scorrimento della finestra anziché l'elemento
displayBottomUpwards Booleano falso Direzione di scorrimento inversa

Dimostrazione

Vedere esempi dal vivo sulle pagine GitHub.


4. Reagisci al gancio di scorrimento infinito

Hook React leggero per scorrimento infinito di @demaceo che gestisce eventi di scorrimento, trigger di caricamento e soglie.

Installazione

|_+_|

Utilizzo

|_+_|

Opzioni

Opzione Tipo Necessario Descrizione
rootMargin Corda NO Margine attorno all'elemento per iniziare il caricamento prima che venga visualizzato
soglia Numero NO Percentuale fatta scorrere per attivare il caricamento di ulteriori informazioni
hasNextPage Booleano Se vero, è possibile caricare più contenuti
onCarica altro Funzione Richiamata quando dovrebbe essere caricata la pagina successiva
caricamento Booleano NO Se vero, il componente sta caricando la pagina successiva

Dimostrazione

Vedere GitHub per esempio.


5. Caricatore infinito virtualizzato con React

Caricamento infinito ad alte prestazioni per tabelle, elenchi e griglie virtualizzati con reazione che gestiscono agevolmente altezze variabili.

Installazione

|_+_|

Utilizzo

|_+_|

Oggetti di scena

Puntello Tipo Necessario Descrizione
bambini Funzione Dovrebbe eseguire il rendering di griglia, elenco o tabella
èRowLoaded Funzione Indica se la riga è caricata
caricarePiùRighe Funzione Richiede il caricamento di righe aggiuntive
conteggiorighe Numero Numero di righe nell'elenco
dimensione batch minima Numero NO Numero minimo di righe da caricare per recupero
soglia Numero NO Carica il batch di righe successivo quando si scorre fino alla soglia specificata

Dimostrazione

Vedere esempi con react-virtualizzato


6. Reagisci al colpo infinito

Libreria a scorrimento infinito per le aziende di @sonaye su GitHub incentrata sul recupero flessibile dei dati.

Installazione

|_+_|

Utilizzo

|_+_|

Oggetti di scena

Puntello Tipo Necessario Descrizione
andare a prendere Funzione Metodo per recuperare più elementi
soglia Numero NO Prossimità dei pixel al fondo per attivare il recupero
limite Numero NO Numero di elementi da restituire per recupero
caricatore Componente NO Elemento da visualizzare durante il recupero in corso
ha di più Booleano NO Se tutti gli elementi sono già caricati
utilizzareCapture Booleano NO Il listener di scorrimento utilizza la fase di acquisizione

Dimostrazione

Vedere GitHub per esempio.


7. React-Easy-Infinite-Scroll

Gancio di scorrimento infinito React ultraleggero che gestisce eventi di scorrimento, soglie e direzioni senza problemi.

Installazione

|_+_|

Utilizzo

|_+_|

Opzioni

Opzione Tipo Necessario Descrizione
azione Funzione Richiamata quando dovrebbe essere caricata la pagina successiva
ha di più Booleano Se è vero, esistono più contenuti
soglia Numero NO Percentuale fatta scorrere per attivare il caricamento
scrollContenitore Elemento NO Elemento a cui collegare il listener di scorrimento
direzione Corda NO direzione di scorrimento 'su' o 'giù'.
rimbalzare Booleano NO Abilita il gestore di scorrimento antirimbalzo

8. Reagire al trigger di scorrimento infinito

Wrapper leggero per attivare azioni di caricamento dal componente react-infinite-scroll.

Installazione

|_+_|

Utilizzo

|_+_|

Opzioni

Opzione Tipo Necessario Descrizione
azione Funzione Richiamata quando dovrebbero essere caricati gli elementi successivi
compensare Numero NO Il trigger anticipato sposta i pixel dal basso

Progettato per l'uso con componente di reazione-infinito-scorrimento


9. Scorrimento infinito dell'elenco delle reazioni

Scorrimento infinito dichiarativo per elenchi React da @ coder1011.

Installazione

|_+_|

Utilizzo

|_+_|

Oggetti di scena

Puntello Tipo Necessario Descrizione
fetchData Funzione Metodo per recuperare più dati
renderItem Funzione Rende ogni elemento
lunghezza Numero Numero totale di articoli
limite Numero NO Numero di articoli da recuperare per carico
larghezza Corda NO Stile a larghezza fissa opzionale

Dimostrazione

Vedere esempi su GitHub .


10. Finestra di reazione InfiniteLoader

Componenti di caricamento infiniti per elementi di dimensioni variabili nella finestra di reazione.

Installazione

|_+_|

Utilizzo

|_+_|

Oggetti di scena

Puntello Tipo Necessario Descrizione
bambini Funzione Dovrebbe eseguire il rendering di Elenco, Griglia o Tabella
isItemLoaded Funzione Se l'elemento nell'indice è caricato
itemCount Numero Numero totale di articoli
caricareAltriArticoli Funzione Carica più elementi
dimensione batch minima Numero NO Numero minimo di articoli da recuperare per carico
soglia Numero NO Segnalazione della soglia quando dovrebbe essere caricato il batch successivo

Dimostrazione

Vedere esempi su GitHub.


Quindi eccoti a disposizione oltre 10 fantastici componenti React a scorrimento infinito e caricamento lento da esplorare per la tua prossima applicazione. Con esempi affidabili, documentazione di supporto e istruzioni per l'uso, inseriscine rapidamente uno nella tua app per abilitare feed infiniti ad alte prestazioni.

Guarda Anche: