Naučite se, kako lahko ta priročna knjižnica v vaših aplikacijah z minimalnim naporom omogoči vmesnik, po katerem lahko povlečete.
Ko mobilne naprave postajajo vse bolj priljubljene, so vmesniki s potegom postali standardni način interakcije z aplikacijami. Vmesniki z možnostjo drsenja so bistveni za zagotavljanje najboljše uporabniške izkušnje mobilnim uporabnikom.
Swiper je vsestranska knjižnica, ki vam omogoča ustvarjanje vmesnikov, ki jih je mogoče premikati, v vaših aplikacijah React. Odkrijte, kako lahko s Swiperjem v svoji aplikaciji React ustvarite vmesnike, ki jih je mogoče povlečeti.
Namestitev programa Swiper
Swiper je ena od mnogih knjižnic, ki jih lahko uporabite za prilagoditev vaše aplikacije React. Če želite začeti uporabljati Swiper, ga morate namestiti v svojo aplikacijo React. To lahko storite z naslednjim terminalskim ukazom, ki ga morate zagnati v korenskem imeniku vašega projekta:
npm namestite swiper
Ko namestite Swiper, ga lahko uporabite v svoji aplikaciji.
Ustvarjanje drsnih vmesnikov
Po namestitvi Swiperja v vašo aplikacijo React lahko ustvarite vmesnike, ki jih je mogoče povlečeti. Začnite z uvozom Swiper in SwiperSlide komponente iz knjižnice Swiper.
Komponenta Swiper je osrednja komponenta knjižnice Swiper. Določa strukturo, vedenje in funkcionalnost premičnih elementov. Komponenta SwiperSlide je podrejena komponenta komponente Swiper. Določa posamezne diapozitive, ki so znotraj komponente Swiper.
Tu je primer vmesnika, po katerem je možno drsenje, ki uporablja komponente Swiper in SwiperSlide:
uvoz Reagiraj od'reagirati';
uvoz { Swiper, SwiperSlide} od"swiper/react";
uvoz'swiper/css';funkcijoaplikacija() {
vrnitev (<divclassName='element'>Element 1div></SwiperSlide> <divclassName='element'>Element 2div></SwiperSlide> <divclassName='element'>3. elementdiv></SwiperSlide> <divclassName='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
izvozprivzeto aplikacija
Poleg tega Swiper in SwiperSlide komponente, ta blok kode uvozi privzeti slogovni list za Swiper z uporabo swiper/css modul.
Primer nato ovije komponento Swiper okoli štirih podrejenih komponent SwiperSlide. Vsak SwiperSlide vsebuje div element z className atribut. Za oblikovanje elementov div lahko uporabite className:
.element {
inline-size: 100px;
mejni polmer: 12px;
oblazinjenje: 1rem;
barva: #333333;
Barva ozadja: #e2e2e2;
družina pisav: kurziv;
}
Prilagajanje vašega vmesnika, po katerem lahko drsite
Po uspešni izdelavi vmesnika, po katerem lahko drsite, lahko izboljšate njegov videz in funkcionalnost, da bo ustrezala vašim zahtevam.
S Swiperjem lahko prilagodite vedenje in videz vmesnika z različnimi možnostmi. Te možnosti posredujete Swiper komponenta kot rekviziti v Reactu:
uvoz Reagiraj od'reagirati';
uvoz { Swiper, SwiperSlide} od"swiper/react";
uvoz'swiper/css';funkcijoaplikacija() {
vrnitev (
spaceBetween={30}
slidesPerView={2}
zanka={ prav }
><divclassName='element'>Element 1div></SwiperSlide> <divclassName='element'>Element 2div></SwiperSlide> <divclassName='element'>3. elementdiv></SwiperSlide> <divclassName='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
izvozprivzeto aplikacija
V tem primeru ima komponenta Swiper tri rekvizite: spaceBetween, slidesPerView, in zanka. The spaceBetween prop nastavi presledek med posameznimi diapozitivi, v tem primeru 30 slikovnih pik.
Uporabljati slidesPerView prop, lahko nastavite število diapozitivov, ki so vidni hkrati. V tem primeru je slidesPerView prop je nastavljen na 2, kar povzroči Swiper komponenta za prikaz dveh diapozitivov hkrati.
Nazadnje, zanka prop določa, ali naj se diapozitivi vrtijo neskončno ali ne. V tem primeru se bodo diapozitivi vrteli neskončno, ker zanka prop vrednost je prav.
Konfiguriranje vaših vmesnikov, ki jih je mogoče premikati, z moduli
Vedenje vmesnika, po katerem lahko povlečete, lahko dodatno konfigurirate z moduli JavaScript ki jih ponuja knjižnica Swiper. Nekateri moduli, ki jih ponuja, so Navigacija, Samodejno predvajanje, Paginacija, in Drsni trak.
Če želite uporabiti katerega koli od teh modulov v vaši aplikaciji, jih morate uvoziti iz knjižnice Swiper. Prav tako morate uvoziti ustrezne sloge CSS za module in posredovati njihova imena v Swiper komponento, ki uporablja moduli prop.
Na primer, tako lahko uporabite Navigacija modul za konfiguracijo vaših vmesnikov, po katerih lahko drsite:
uvoz Reagiraj od"reagirati";
uvoz { Swiper, SwiperSlide } od"swiper/react";
uvoz { Navigacija } od"swiper";
uvoz"swiper/css";
uvoz"swiper/css/navigation";funkcijoaplikacija() {
vrnitev (
spaceBetween={30}
slidesPerView={2}
moduli={[Navigacija]}
zanka={prav}
navigacija={prav}
><divclassName="element">Element 1div></SwiperSlide> <divclassName="element">Element 2div></SwiperSlide> <divclassName="element">3. elementdiv></SwiperSlide> <divclassName="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozprivzeto aplikacija;
Ta blok kode uvozi Navigacija modul in njegov slog CSS, nato pa določi modul v moduli rekvizit za Swiper komponento. The moduli prop omogoča in konfigurira module, ki jih ponuja knjižnica Swiper.
Navigacijski modul zagotavlja navigacijsko funkcijo za komponento Swiper. Doda puščična gumba za prejšnji in naslednji, ki ju lahko kliknete ali tapnete, da se premaknete na prejšnji ali naslednji diapozitiv.
The navigacijo vrednost prop je true, kar bo povzročilo prikaz prejšnjih in naslednjih gumbov na zaslonu.
Konfiguriranje vmesnikov, po katerih je mogoče drsiti, s samodejnim predvajanjem
The Samodejno predvajanje modul omogoča drsniku samodejno prehajanje med diapozitivi brez posredovanja uporabnika.
Tukaj je primer, kako konfigurirati vmesnik, po katerem lahko povlečete, z uporabo Samodejno predvajanje modul:
uvoz Reagiraj od"reagirati";
uvoz { Swiper, SwiperSlide } od"swiper/react";
uvoz { Samodejno predvajanje } od"swiper";
uvoz"swiper/css";
uvoz"swiper/css/autoplay";funkcijoaplikacija() {
vrnitev (
spaceBetween={30}
slidesPerView={2}
moduli={[Autoplay]}
zanka={prav}
samodejno predvajanje={{ zamuda: 3000 }}
><divclassName="element">Element 1div></SwiperSlide> <divclassName="element">Element 2div></SwiperSlide> <divclassName="element">3. elementdiv></SwiperSlide> <divclassName="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozprivzeto aplikacija;
Uporabljati samodejno predvajanje prop, lahko določite zamuda; v tem primeru je nastavljena na 3000 milisekund.
Konfiguriranje vmesnikov, ki jih je mogoče premikati, s paginacijo
Drug pomemben modul Swiper je Paginacija. The Paginacija modul vam omogoča, da drsniku dodate oznake za paginacijo ali indikatorje vrstice napredka, kar uporabnikom omogoča vizualno predstavitev števila diapozitivov in njihovega trenutnega položaja znotraj drsnika.
Za uporabo Paginacija modul, ga morate uvoziti in vključiti v moduli rekvizit za Swiper komponenta:
uvoz Reagiraj od"reagirati";
uvoz { Swiper, SwiperSlide } od"swiper/react";
uvoz { Paginacija } od"swiper";
uvoz"swiper/css";
uvoz"swiper/css/pagination";funkcijoaplikacija() {
vrnitev (
spaceBetween={30}
slidesPerView={2}
modules={[Pagination]}
zanka={prav}
pagination={{ klikniti: prav }}
><divclassName="element">Element 1div></SwiperSlide> <divclassName="element">Element 2div></SwiperSlide> <divclassName="element">3. elementdiv></SwiperSlide> <divclassName="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
izvozprivzeto aplikacija;
Ta blok kode zagotavlja funkcijo paginacije z Paginacija modul. Uporabnikom omogoča tudi klikanje paginacija krogle z nastavitvijo klikniti lastnina paginacija prop to true.
Poleg knjižnice Swiper paginacija modul, react-paginate je še ena odlična možnost za ustvarjanje paginacije v vaši aplikaciji React.
Gradnja dostopnih aplikacij z React
Vmesniki z možnostjo drsenja izboljšajo uporabniško izkušnjo vaše aplikacije za uporabnike zaslonov na dotik. Swiper ponuja veliko prilagodljivosti in ga lahko enostavno prilagodite potrebam vaše aplikacije.
Različne knjižnice uporabniškega vmesnika lahko pomagajo narediti vaše aplikacije React bolj dostopne. Te knjižnice zagotavljajo funkcije in funkcije, ki izboljšajo uporabniško izkušnjo vaše aplikacije.