Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

Ste že kdaj naleteli na spletno mesto ali aplikacijo, ki med pomikanjem naloži in prikaže več vsebine? Temu pravimo neskončni zvitek.

Neskončno drsenje je priljubljena tehnika, ki zmanjša število nalaganj strani. Prav tako lahko poskrbi za bolj gladko uporabniško izkušnjo, zlasti na mobilnih napravah.

Obstaja nekaj različnih načinov, kako lahko implementirate neskončno drsenje v React.js. Eden od načinov je uporaba knjižnice, kot je react-infinite-scroll-component. Ta knjižnica ponuja komponento, ki sproži dogodek, ko se uporabnik pomakne na dno strani. Ta dogodek lahko nato uporabite za nalaganje več vsebine.

Drug način za implementacijo neskončnega drsenja je uporaba vgrajenih funkcij, ki jih nudi React. Ena taka funkcija je »componentDidMount«, ki jo React pokliče, ko je komponenta prvič nameščena.

S to funkcijo lahko naložite prvi paket podatkov in nato uporabite funkcijo »componentDidUpdate« za nalaganje več podatkov, ko se uporabnik pomakne navzdol. Lahko tudi

instagram viewer
uporabite kljuke React da dodate funkcijo neskončnega drsenja.

Če želite uporabiti komponento react-infinite-scroll, jo morate najprej namestiti z uporabo npm:

npm namestite reagirati-neskončno-drsenje- komponenta --shrani

Nato ga lahko uvozite v svojo komponento React.

uvoz Reagiraj od 'reagirati'
uvoz InfiniteScroll od 'react-infinite-scroll-component'
razredaplikacijase raztezaReagiraj.Komponenta{
konstruktor() {
super()
to.state = {
predmete: [],
 ima več: prav
 }
 }


componentDidMount() {
to.fetchData(1)
 }


fetchData = (stran) => {
konst novi predmeti = []


za (pustiti jaz = 0; jaz < 100; i++) {
novi predmeti.potisni(jaz )
 }


if (stran 100) {
to.setState({ imaVeč: false })
 }


to.setState({ predmete: [...this.state.items, ...newItems] })
 }


render() {
vrnitev (
<div>
<h1>Neskončno drsenje</h1>
<InfiniteScroll
 dataLength={to.state.items.length}
 naslednji={to.fetchData}
 hasMore={to.state.hasMore}
 loader={<h4>Nalaganje...</h4>}
 endMessage={
<p style={{ textAlign: 'center' }}>
<b>Juhu! Vse ste videli</b>
</str>
 }
>
 {to.state.items.map((element, indeks) => (
<div ključ={index}>
 {item}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
izvozprivzeto aplikacija

Ta koda se začne z uvozom Reacta in komponente InfiniteScroll iz knjižnice react-infinite-scroll-component. Nato ustvari komponento s stanjem in inicializira stanje s praznim predmete niz in a imaVeč zastavica nastavljena na true.

V metodi življenjskega cikla componentDidMount pokličete fetchData metoda z a strani parameter od 1. Metoda fetchData izvede klic API, da pridobi nekaj podatkov. Ta primer samo ustvari nekaj navideznih podatkov. Nato ustvari niz 100 elementov.

Če je parameter strani 100, ni več elementov, zato nastavite zastavico hasMore na false. To bo komponenti InfiniteScroll preprečilo nadaljnje klice API-ja. Končno nastavite stanje z uporabo novih podatkov.

Metoda upodabljanja uporablja komponento InfiniteScroll in posreduje nekaj rekvizitov. Podpora dataLength je nastavljena na dolžino matrike elementov. Naslednja podpora je nastavljena na metodo fetchData. Podpora hasMore je nastavljena na zastavico hasMore. Podpora nalagalnika povzroči, da komponenta upodobi svojo vsebino kot indikator nalaganja. Podobno bo upodobil element endMessage kot sporočilo, ko se bodo vsi podatki končali z nalaganjem.

Obstajajo tudi drugi rekviziti, ki jih lahko posredujete komponenti InfiniteScroll, vendar so to tisti, ki jih boste uporabljali najpogosteje.

Uporaba vgrajenih funkcij

React ima tudi nekaj vgrajenih metod, ki jih lahko uporabite za implementacijo neskončnega drsenja.

Prva metoda je componentDidUpdate. React pokliče to metodo po posodobitvi komponente. S to metodo lahko preverite, ali se je uporabnik pomaknil na dno strani, in če je, naložite več podatkov.

Druga metoda je drsenje, ki ga React pokliče, ko se uporabnik pomika. S to metodo lahko spremljate položaj drsenja. Če se je uporabnik pomaknil na dno strani, lahko naložite več podatkov.

Tukaj je primer, kako lahko uporabite te metode za implementacijo neskončnega drsenja:

uvoz Reagiraj, {useState, useEffect} od 'reagirati'
funkcijoaplikacija() {
konst [items, setItems] = useState([])
konst [hasMore, setHasMore] = useState(prav)
konst [stran, setPage] = useState(1)


useEffect(() => {
 fetchData (stran)
 }, [stran])


konst fetchData = (stran) => {
konst novi predmeti = []


za (pustiti jaz = 0; jaz < 100; i++) {
novi predmeti.potisni(jaz)
 }


if (stran 100) {
 setHasMore(lažno)
 }


setItems([...predmeti, ...novi predmeti])
 }


konst onScroll = () => {
konst scrollTop = dokument.documentElement.scrollTop
konst scrollHeight = dokument.documentElement.scrollHeight
konst clientHeight = dokument.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (stran + 1)
 }
 }


useEffect(() => {
 window.addEventListener('drsenje', onScroll)
 vrnitev () => window.removeEventListener('drsenje', onScroll)
 }, [predmeti])


vrnitev (
<div>
 {items.map((predmet, indeks) => (
<div ključ={index}>
 {item}
</div>
 ))}
</div>
 )
}
izvozprivzeto aplikacija

Ta koda uporablja kljuki useState in useEffect za upravljanje stanja in stranskih učinkov.

V kavlju useEffect pokliče metodo fetchData s trenutno stranjo. Metoda fetchData izvede klic API, da pridobi nekaj podatkov. V tem primeru samo ustvarjate nekaj navideznih podatkov za prikaz tehnike.

Zanka for zapolni matriko newItems s 100 celimi števili. Če je parameter strani 100, nastavite zastavico hasMore na false. To bo komponenti InfiniteScroll preprečilo nadaljnje klice API-ja. Končno nastavite stanje z novimi podatki.

Metoda onScroll spremlja položaj drsenja. Če se je uporabnik pomaknil na dno strani, lahko naložite več podatkov.

Kavelj useEffect doda poslušalca dogodkov za dogodek drsenja. Ko se sproži dogodek drsenja, pokliče metodo onScroll.

Uporaba neskončnega drsenja ima prednosti in slabosti. Pomaga lahko izboljšati uporabniški vmesnik, kar omogoča bolj gladko izkušnjo, zlasti na mobilnih napravah. Vendar pa lahko uporabniki tudi izgubijo vsebino, saj se morda ne bodo pomaknili dovolj daleč navzdol, da bi jo videli.

Pomembno je pretehtati prednosti in slabosti tehnike neskončnega drsenja preden ga implementirate na svoje spletno mesto ali aplikacijo.

Dodajanje neskončnega drsenja na vaše spletno mesto ali aplikacijo React.js lahko pomaga izboljšati uporabniško izkušnjo. Z neskončnim drsenjem uporabnikom ni treba klikati, da bi videli več vsebine. Uporaba Infinite Scroll v vaši aplikaciji React.js lahko tudi pomaga zmanjšati število nalaganj strani, kar lahko izboljša učinkovitost.

Svojo aplikacijo React lahko tudi preprosto brezplačno namestite na strani Github.