Kuinka luoda pyyhkäiseviä käyttöliittymiä React-sovelluksessasi Swiperillä

Mobiililaitteiden yleistyessä pyyhkäisevistä käyttöliittymistä on tullut tavallinen tapa olla vuorovaikutuksessa sovellusten kanssa. Pyyhkäisevät käyttöliittymät ovat välttämättömiä parhaan käyttökokemuksen tarjoamiseksi mobiilikäyttäjille.

Swiper on monipuolinen kirjasto, jonka avulla voit luoda pyyhkäiseviä käyttöliittymiä React-sovelluksiin. Tutustu, kuinka voit luoda pyyhkäiseviä käyttöliittymiä React-sovelluksessasi Swiperin avulla.

Swiperin asennus

Swiper on yksi monista kirjastoista, joiden avulla voit mukauttaa React-sovellustasi. Aloita Swiperin käyttö asentamalla se React-sovellukseesi. Voit tehdä tämän seuraavalla päätekomennolla, joka sinun tulee suorittaa projektisi juurihakemistossa:

npm asenna pyyhkäisy

Kun olet asentanut Swiperin, voit käyttää sitä sovelluksessasi.

Pyyhkäisevien käyttöliittymien luominen

Kun olet asentanut Swiperin React-sovellukseesi, voit luoda pyyhkäiseviä käyttöliittymiä. Aloita tuomalla

Swiper-komponentti on Swiper-kirjaston ydinkomponentti. Se määrittelee pyyhkäisyelementtien rakenteen, käyttäytymisen ja toiminnallisuuden. SwiperSlide-komponentti on Swiper-komponentin lapsikomponentti. Se määrittää yksittäiset diat, jotka ovat Swiper-komponentin sisällä.

Tässä on esimerkki pyyhkäistävästä käyttöliittymästä, jossa käytetään Swiper- ja SwiperSlide-komponentteja:

tuonti Reagoi alkaen'reagoi';
tuonti { Swiper, SwiperSlide} alkaen"pyyhkäise/reagoi";
tuonti'swiper/css';
toimintoSovellus() {
palata (




<divluokan nimi="elementti">Elementti 1div></SwiperSlide>
<divluokan nimi="elementti">Elementti 2div></SwiperSlide>
<divluokan nimi="elementti">Elementti 3div></SwiperSlide>
<divluokan nimi="elementti">Elementti 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
viedäoletuksena Sovellus

Lisäksi Pyyhkäisy ja SwiperSlide komponentit, tämä koodilohko tuo Swiperin oletustyylisivun käyttämällä swiper/css moduuli.

Esimerkki kääritään sitten Swiper-komponentin neljän SwiperSlide-alikomponentin ympärille. Jokainen SwiperSlide sisältää a div elementti kanssa luokan nimi attribuutti. Voit käyttää classNamea div-elementtien tyyliin:

.elementti {
rivin kokoinen: 100px;
raja-säde: 12px;
pehmuste: 1rem;
väri: #333333;
taustaväri: #e2e2e2;
font-perhe: kursiivinen;
}

Pyyhkäisevän käyttöliittymän mukauttaminen

Kun olet luonut pyyhkäisykäyttöliittymän onnistuneesti, voit parantaa sen ulkonäköä ja toimintoja tarpeidesi mukaan.

Swiperillä voit mukauttaa käyttöliittymän toimintaa ja ulkoasua eri vaihtoehdoilla. Välität nämä vaihtoehdot Pyyhkäisy komponentti kuin rekvisiitta Reactissa:

tuonti Reagoi alkaen'reagoi';
tuonti { Swiper, SwiperSlide} alkaen"pyyhkäise/reagoi";
tuonti'swiper/css';
toimintoSovellus() {
palata (



 spaceBetween={30}
 slidesPerView={2}
 loop={ totta }
 >
<divluokan nimi="elementti">Elementti 1div></SwiperSlide>
<divluokan nimi="elementti">Elementti 2div></SwiperSlide>
<divluokan nimi="elementti">Elementti 3div></SwiperSlide>
<divluokan nimi="elementti">Elementti 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
viedäoletuksena Sovellus

Tässä esimerkissä Swiper-komponentti sisältää kolme tukia: välissä, slidesPerView, ja silmukka. The välissä prop asettaa kunkin dian välisen tilan, tässä tapauksessa 30 pikseliä.

Käyttämällä slidesPerView prop, voit asettaa kerralla näkyvien diojen määrän. Tässä tapauksessa slidesPerView prop on asetettu arvoon 2, mikä aiheuttaa Pyyhkäisy komponentti näyttää kaksi diaa samanaikaisesti.

Lopuksi, silmukka prop määrittää, tuleeko dioja kiertää loputtomasti vai ei. Tässä esimerkissä diat kiertävät loputtomasti, koska silmukka prop arvo on totta.

Pyyhkäisevien käyttöliittymien määrittäminen moduuleilla

Voit edelleen määrittää pyyhkäisykäyttöliittymäsi toimintaa käyttämällä JavaScript-moduulit tarjoaa Swiper-kirjasto. Jotkut sen tarjoamista moduuleista ovat Navigointi, Automaattinen toisto, Sivunumerointi, ja Vierityspalkki.

Jos haluat käyttää jotakin näistä moduuleista sovelluksessasi, sinun on tuotava ne Swiper-kirjastosta. Sinun tulee myös tuoda vastaavat CSS-tyylit moduuleille ja välittää niiden nimet Pyyhkäisy komponenttia käyttämällä moduulit prop.

Esimerkiksi näin voit käyttää Navigointi moduuli pyyhkäisykäyttöliittymien määrittämiseen:

tuonti Reagoi alkaen"reagoi";
tuonti { Swiper, SwiperSlide } alkaen"pyyhkäise/reagoi";
tuonti { Navigointi } alkaen"pyyhkäisy";
tuonti"swiper/css";
tuonti"swiper/css/navigation";
toimintoSovellus() {
palata (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Navigointi]}
 loop={totta}
 navigation={totta}
 >
<divluokan nimi="elementti">Elementti 1div></SwiperSlide>
<divluokan nimi="elementti">Elementti 2div></SwiperSlide>
<divluokan nimi="elementti">Elementti 3div></SwiperSlide>
<divluokan nimi="elementti">Elementti 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä koodilohko tuo Navigointi moduuli ja sen CSS-tyyli, määrittää sitten moduulin moduulit prop of Pyyhkäisy komponentti. The moduulit prop ottaa käyttöön ja määrittää Swiper-kirjaston tarjoamat moduulit.

Navigointimoduuli tarjoaa navigointitoiminnot Swiper-komponenttiin. Se lisää edellisen ja seuraavan nuolipainikkeet, joita voit napsauttaa tai napauttaa siirtyäksesi edelliseen tai seuraavaan diaan.

The navigointi prop-arvo on tosi, minkä vuoksi edellinen ja seuraava painike näkyvät näytöllä.

Pyyhkäisevien käyttöliittymien määrittäminen automaattisen toiston avulla

The Automaattinen toisto moduuli mahdollistaa liukusäätimen siirtymisen diojen välillä automaattisesti ilman käyttäjän toimia.

Tässä on esimerkki pyyhkäisykäyttöliittymän määrittämisestä käyttämällä Automaattinen toisto moduuli:

tuonti Reagoi alkaen"reagoi";
tuonti { Swiper, SwiperSlide } alkaen"pyyhkäise/reagoi";
tuonti { Automaattinen toisto } alkaen"pyyhkäisy";
tuonti"swiper/css";
tuonti"swiper/css/autoplay";
toimintoSovellus() {
palata (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Automaattinen toisto]}
 loop={totta}
 autoplay={{ viive: 3000 }}
 >
<divluokan nimi="elementti">Elementti 1div></SwiperSlide>
<divluokan nimi="elementti">Elementti 2div></SwiperSlide>
<divluokan nimi="elementti">Elementti 3div></SwiperSlide>
<divluokan nimi="elementti">Elementti 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
viedäoletuksena Sovellus;

Käyttämällä automaattinen toisto prop, voit määrittää viive; tässä tapauksessa se on asetettu 3000 millisekuntiin.

Pyyhkäisevien käyttöliittymien määrittäminen sivutuksella

Toinen tärkeä Swiper-moduuli on Sivunumerointi. The Sivunumerointi moduulin avulla voit lisätä sivutusmerkkejä tai edistymispalkin osoittimia liukusäätimeen, jolloin käyttäjät saavat visuaalisen esityksen diojen määrästä ja niiden nykyisestä sijainnista liukusäätimessä.

Käyttääksesi Sivunumerointi moduuli, sinun on tuotava se ja sisällytettävä se moduulit prop of Pyyhkäisy komponentti:

tuonti Reagoi alkaen"reagoi";
tuonti { Swiper, SwiperSlide } alkaen"pyyhkäise/reagoi";
tuonti { Sivutus } alkaen"pyyhkäisy";
tuonti"swiper/css";
tuonti"swiper/css/pagination";
toimintoSovellus() {
palata (



 spaceBetween={30}
 slidesPerView={2}
 modules={[sivutus]}
 loop={totta}
 sivutus={{ napsautettava: totta }}
 >
<divluokan nimi="elementti">Elementti 1div></SwiperSlide>
<divluokan nimi="elementti">Elementti 2div></SwiperSlide>
<divluokan nimi="elementti">Elementti 3div></SwiperSlide>
<divluokan nimi="elementti">Elementti 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä koodilohko tarjoaa sivutustoiminnon Sivunumerointi moduuli. Sen avulla käyttäjät voivat myös napsauttaa sivunumerointi luoteja asettamalla napsautettava omaisuutta sivunumerointi pitää paikkansa.

Swiper-kirjaston lisäksi sivunumerointi moduuli, reagoi-sivuta on toinen erinomainen vaihtoehto sivujen luomiseen React-sovelluksessasi.

Rakenna helppokäyttöisiä sovelluksia Reactin avulla

Pyyhkäisevät käyttöliittymät parantavat sovelluksesi käyttökokemusta kosketusnäytön käyttäjille. Swiper tarjoaa runsaasti joustavuutta ja voit helposti muokata sitä sovelluksesi tarpeiden mukaan.

Useat käyttöliittymäkirjastot voivat auttaa tekemään React-sovelluksistasi helpommin saavutettavia. Nämä kirjastot tarjoavat ominaisuuksia ja toimintoja, jotka parantavat sovelluksesi käyttökokemusta.