Kuidas luua Swiperi abil oma Reacti rakenduses pühkimisliideseid

Kuna mobiilseadmed muutuvad populaarsemaks, on pühkimisliidestest saanud standardne viis rakendustega suhtlemiseks. Pühkitavad liidesed on mobiilikasutajatele parima kasutuskogemuse pakkumiseks hädavajalikud.

Swiper on mitmekülgne teek, mis võimaldab teil Reacti rakendustes luua pühkimisliideseid. Avastage, kuidas saate Swiperi abil oma Reacti rakenduses pühkitavaid liideseid luua.

Swiperi installimine

Swiper on üks paljudest teekidest, mida saate oma Reacti rakenduse kohandamiseks kasutada. Swiperiga alustamiseks peate selle oma Reacti rakendusse installima. Seda saate teha järgmise terminalikäsuga, mida peaksite käivitama oma projekti juurkataloogis:

npm install swiper

Kui olete Swiperi installinud, saate seda oma rakenduses kasutada.

Pühkitavate liideste loomine

Pärast Swiperi installimist oma Reacti rakendusse saate luua pühkimisliideseid. Alustage importimisest Swiper ja SwiperSlide komponendid Swiperi teegist.

Swiperi komponent on Swiperi teegi põhikomponent. See määrab pühitavate elementide struktuuri, käitumise ja funktsionaalsuse. Komponent SwiperSlide on komponendi Swiper alamkomponent. See määratleb üksikud slaidid, mis asuvad komponendis Swiper.

Siin on näide pühkitavast liidesest, mis kasutab komponente Swiper ja SwiperSlide.

importida Reageerige alates'reageeri';
importida { Swiper, Swiper Slide} alates"pühkima / reageerima";
importida'swiper/css';
funktsiooniRakendus() {
tagasi (




<divklassi nimi='element'>1. elementdiv></SwiperSlide>
<divklassi nimi='element'>2. elementdiv></SwiperSlide>
<divklassi nimi='element'>3. elementdiv></SwiperSlide>
<divklassi nimi='element'>4. elementdiv></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportidavaikimisi Rakendus

Lisaks Swiper ja SwiperSlide komponendid, impordib see koodiplokk Swiperi vaikelaadilehe, kasutades swiper/css moodul.

Seejärel mähib näide Swiper komponendi ümber nelja SwiperSlide'i alamkomponendi. Iga SwiperSlide sisaldab a div element koos klassi nimi atribuut. Div-elementide stiiliks saate kasutada klassinime:

.element {
reasiseses suuruses: 100px;
piiriraadius: 12px;
polsterdus: 1rem;
värvi: #333333;
taustavärv: #e2e2e2;
font-perekond: kursiiv;
}

Pühkitava liidese kohandamine

Pärast pühitava liidese edukat loomist saate täiustada selle välimust ja funktsionaalsust vastavalt oma vajadustele.

Swiperi abil saate erinevate valikute abil kohandada liidese käitumist ja välimust. Saate need valikud edasi anda Swiper komponent as rekvisiidid Reactis:

importida Reageerige alates'reageeri';
importida { Swiper, Swiper Slide} alates"pühkima / reageerima";
importida'swiper/css';
funktsiooniRakendus() {
tagasi (



 spaceBetween={30}
 slidesPerView={2}
 loop={ tõsi }
 >
<divklassi nimi='element'>1. elementdiv></SwiperSlide>
<divklassi nimi='element'>2. elementdiv></SwiperSlide>
<divklassi nimi='element'>3. elementdiv></SwiperSlide>
<divklassi nimi='element'>4. elementdiv></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportidavaikimisi Rakendus

Selles näites kasutab Swiperi komponent kolm tugipunkti: ruum Vahel, slidesPerViewja silmus. The ruum Vahel prop määrab iga slaidi vahelise ruumi, antud juhul 30 pikslit.

Kasutades slidesPerView prop, saate määrata korraga nähtavate slaidide arvu. Sel juhul on slidesPerView prop on seatud väärtusele 2, mis põhjustab Swiper komponent kahe slaidi samaaegseks kuvamiseks.

Lõpuks, silmus prop määrab, kas slaidid peaksid lõputult ringi käima või mitte. Selles näites liiguvad slaidid lõputult, kuna silmus prop väärtus on tõsi.

Pühkitavate liideste konfigureerimine moodulitega

Pühkitava liidese käitumist saate täpsemalt konfigureerida JavaScripti moodulid pakub Swiperi raamatukogu. Mõned selle pakutavad moodulid on Navigeerimine, Automaatne esitus, Leheküljedja Kerimisriba.

Nende moodulite kasutamiseks oma rakenduses peate need Swiperi teegist importima. Samuti peaksite importima moodulitele vastavad CSS-stiilid ja edastama nende nimed moodulile Swiper komponenti kasutades moodulid prop.

Näiteks nii saate kasutada Navigeerimine moodul pühitavate liideste konfigureerimiseks:

importida Reageerige alates"reageerida";
importida { Swiper, Swiper Slide } alates"pühkima / reageerima";
importida { Navigeerimine } alates"pühkija";
importida"swiper/css";
importida"swiper/css/navigation";
funktsiooniRakendus() {
tagasi (



 spaceBetween={30}
 slidesPerView={2}
 modules={[navigeerimine]}
 loop={tõsi}
 navigation={tõsi}
 >
<divklassi nimi="element">1. elementdiv></SwiperSlide>
<divklassi nimi="element">2. elementdiv></SwiperSlide>
<divklassi nimi="element">3. elementdiv></SwiperSlide>
<divklassi nimi="element">4. elementdiv></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportidavaikimisi Rakendus;

See koodiplokk impordib Navigeerimine moodul ja selle CSS-stiil, siis määrab mooduli moodulid prop of the Swiper komponent. The moodulid prop lubab ja konfigureerib Swiperi teegi pakutavaid mooduleid.

Navigeerimismoodul pakub Swiperi komponendile navigeerimisfunktsioone. See lisab eelmise ja järgmise noole nupud, mida saate eelmisele või järgmisele slaidile liikumiseks klõpsata või puudutada.

The navigeerimine prop väärtus on tõene, mistõttu kuvatakse ekraanil eelmised ja järgmised nupud.

Pühkitavate liideste konfigureerimine automaatesitusega

The Automaatne esitus moodul võimaldab liuguril automaatselt slaidide vahel liikuda ilma kasutaja sekkumiseta.

Siin on näide selle kohta, kuidas konfigureerida oma pühkivat liidest kasutades Automaatne esitus moodul:

importida Reageerige alates"reageerida";
importida { Swiper, Swiper Slide } alates"pühkima / reageerima";
importida { Autoplay } alates"pühkija";
importida"swiper/css";
importida"swiper/css/autoplay";
funktsiooniRakendus() {
tagasi (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Automaatne esitus]}
 loop={tõsi}
 autoplay={{ viivitus: 3000 }}
 >
<divklassi nimi="element">1. elementdiv></SwiperSlide>
<divklassi nimi="element">2. elementdiv></SwiperSlide>
<divklassi nimi="element">3. elementdiv></SwiperSlide>
<divklassi nimi="element">4. elementdiv></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Kasutades automaatesitus prop, saate määrata viivitus; sel juhul on see seatud 3000 millisekundile.

Lehtede lehitsemisega pühitavate liideste konfigureerimine

Teine oluline Swiperi moodul on Leheküljed. The Leheküljed moodul võimaldab teil lisada liugurile lehekülgede täppe või edenemisriba indikaatoreid, andes kasutajatele visuaalse esituse slaidide arvust ja nende hetkeasendist liuguris.

Et kasutada Leheküljed moodul, peate selle importima ja lisama sellesse moodulid prop of the Swiper komponent:

importida Reageerige alates"reageerida";
importida { Swiper, Swiper Slide } alates"pühkima / reageerima";
importida { Leheküljed } alates"pühkija";
importida"swiper/css";
importida"swiper/css/pagenation";
funktsiooniRakendus() {
tagasi (



 spaceBetween={30}
 slidesPerView={2}
 modules={[lehekülgedel]}
 loop={tõsi}
 pagenation={{ klikitav: tõsi }}
 >
<divklassi nimi="element">1. elementdiv></SwiperSlide>
<divklassi nimi="element">2. elementdiv></SwiperSlide>
<divklassi nimi="element">3. elementdiv></SwiperSlide>
<divklassi nimi="element">4. elementdiv></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportidavaikimisi Rakendus;

See koodiplokk pakub lehekülgede jagamise funktsiooni koos Leheküljed moodul. Samuti võimaldab see kasutajatel klõpsata lehekülgede muutmine täppe, seades klikitav vara lehekülgede muutmine toetuma tõele.

Lisaks Swiperi raamatukogule lehekülgede muutmine moodul, reageeri-pagina on veel üks suurepärane võimalus Reacti rakenduses lehekülgede loomiseks.

Juurdepääsetavate rakenduste loomine Reactiga

Pühkitavad liidesed parandavad teie rakenduse kasutuskogemust puuteekraaniga kasutajatele. Swiper pakub palju paindlikkust ja saate seda hõlpsalt kohandada vastavalt oma rakenduse vajadustele.

Erinevad kasutajaliidese teegid võivad aidata teie Reacti rakendusi juurdepääsetavamaks muuta. Need teegid pakuvad funktsioone ja funktsioone, mis parandavad teie rakenduse kasutuskogemust.