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 | SÌ | Se vero, è possibile caricare più contenuti |
| onCarica altro | Funzione | SÌ | 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 | SÌ | Dovrebbe eseguire il rendering di griglia, elenco o tabella |
| èRowLoaded | Funzione | SÌ | Indica se la riga è caricata |
| caricarePiùRighe | Funzione | SÌ | Richiede il caricamento di righe aggiuntive |
| conteggiorighe | Numero | SÌ | 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 | SÌ | 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 | SÌ | Richiamata quando dovrebbe essere caricata la pagina successiva |
| ha di più | Booleano | SÌ | 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 | SÌ | 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 | SÌ | Metodo per recuperare più dati |
| renderItem | Funzione | SÌ | Rende ogni elemento |
| lunghezza | Numero | SÌ | 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 | SÌ | Dovrebbe eseguire il rendering di Elenco, Griglia o Tabella |
| isItemLoaded | Funzione | SÌ | Se l'elemento nell'indice è caricato |
| itemCount | Numero | SÌ | Numero totale di articoli |
| caricareAltriArticoli | Funzione | SÌ | 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:
- Come e dove acquistare MixTrust (MXT) – Una semplice guida passo passo
- Come integrare un Chatbot con il tuo sito web Django Python
- Le migliori 22 estensioni del codice di Visual Studio per lo sviluppo Web
- Come recuperare la password di posta AOL dimenticata
- JavaScript vs jQuery: quale è meglio per lo sviluppo web?