Sužinokite, kaip ši patogi biblioteka gali įjungti perbraukiamą sąsają jūsų programose su minimaliomis pastangomis.
Mobiliesiems įrenginiams populiarėjant, perbraukiamos sąsajos tapo standartiniu sąveikos su programomis būdu. Perbraukiamos sąsajos yra būtinos, kad mobiliųjų įrenginių naudotojams būtų suteikta geriausia vartotojo patirtis.
„Swiper“ yra universali biblioteka, leidžianti kurti perbraukiamas sąsajas „React“ programose. Sužinokite, kaip galite sukurti perbraukiamas sąsajas „React“ programoje naudodami „Swiper“.
Swiper diegimas
„Swiper“ yra viena iš daugelio bibliotekų, kurias galite naudoti norėdami tinkinti „React“ programą. Norėdami pradėti naudoti „Swiper“, turite jį įdiegti „React“ programoje. Tai galite padaryti naudodami šią terminalo komandą, kurią turėtumėte paleisti savo projekto šakniniame kataloge:
npm įdiegti swiper
Įdiegę „Swiper“, galėsite naudoti ją savo programoje.
Perbraukiamų sąsajų kūrimas
Įdiegę „Swiper“ savo „React“ programoje, galite sukurti perbraukiamas sąsajas. Pradėkite importuodami Swiper ir SwiperSlide komponentai iš „Swiper“ bibliotekos.
„Swiper“ komponentas yra pagrindinis „Swiper“ bibliotekos komponentas. Ji apibrėžia perbraukiamų elementų struktūrą, elgesį ir funkcionalumą. „SwiperSlide“ komponentas yra antrinis „Swiper“ komponento komponentas. Jis apibrėžia atskiras skaidres, kurios yra „Swiper“ komponente.
Štai braukiamos sąsajos, naudojant „Swiper“ ir „SwiperSlide“ komponentus, pavyzdys:
importuoti Reaguoti iš'reaguoti';
importuoti { Swiper, SwiperSlide} iš"perbraukimas / reaguoti";
importuoti'swiper/css';funkcijaProgramėlė() {
grąžinti (<divklasės pavadinimas="elementas">1 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">2 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">3 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">4 elementasdiv></SwiperSlide>
</Swiper>
</div>
)
}
eksportuotinumatytas Programėlė
Be to, Swiper ir SwiperSlide komponentų, šis kodo blokas importuoja numatytąjį „Swiper“ stiliaus lapą naudodamas swiper/css modulis.
Tada pavyzdyje „Swiper“ komponentas apvyniojamas aplink keturis „SwiperSlide“ antrinius komponentus. Kiekviename „SwiperSlide“ yra a div elementas su klasės pavadinimas atributas. Galite naudoti className, kad sukurtumėte div elementų stilių:
.elementas {
eilutinio dydžio: 100px;
pasienio spindulys: 12px;
kamšalas: 1rem;
spalva: #333333;
fono spalva: #e2e2e2;
šrifto šeima: kursyvus;
}
Perbraukiamos sąsajos pritaikymas
Sėkmingai sukūrę braukiamą sąsają, galite patobulinti jos išvaizdą ir funkcionalumą, kad atitiktų jūsų poreikius.
Naudodami „Swiper“ galite tinkinti sąsajos elgesį ir išvaizdą naudodami įvairias parinktis. Perduodate šias parinktis Swiper komponentas kaip rekvizitai React:
importuoti Reaguoti iš'reaguoti';
importuoti { Swiper, SwiperSlide} iš"perbraukimas / reaguoti";
importuoti'swiper/css';funkcijaProgramėlė() {
grąžinti (
spaceBetween={30}
slidesPerView={2}
kilpa={ tiesa }
><divklasės pavadinimas="elementas">1 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">2 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">3 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">4 elementasdiv></SwiperSlide>
</Swiper>
</div>
)
}
eksportuotinumatytas Programėlė
Šiame pavyzdyje „Swiper“ komponentas turi tris rekvizitus: erdvė Tarp, slidesPerView, ir kilpa. The erdvė Tarp prop nustato tarpą tarp kiekvienos skaidrės, šiuo atveju 30 pikselių.
Naudojant slidesPerView prop, galite nustatyti vienu metu matomų skaidrių skaičių. Šiuo atveju, slidesPerView prop yra nustatytas į 2, todėl Swiper komponentas, kad vienu metu būtų rodomos dvi skaidrės.
Galiausiai, kilpa prop nurodo, ar skaidrės turi suktis be galo, ar ne. Šiame pavyzdyje skaidrės sukasi be galo, nes kilpa rekvizito vertė yra tiesa.
Perbraukiamų sąsajų konfigūravimas naudojant modulius
Galite toliau konfigūruoti perbraukiamos sąsajos elgseną naudodami JavaScript moduliai teikia Swiper biblioteka. Kai kurie jo pateikiami moduliai yra Navigacija, Automatinis paleidimas, Puslapių rašymas, ir Slinkties juosta.
Norėdami naudoti bet kurį iš šių modulių savo programoje, turite importuoti juos iš „Swiper“ bibliotekos. Taip pat turėtumėte importuoti atitinkamus modulių CSS stilius ir perduoti jų pavadinimus Swiper komponentas naudojant moduliai prop.
Pavyzdžiui, taip galite naudoti Navigacija modulis, skirtas konfigūruoti perbraukiamas sąsajas:
importuoti Reaguoti iš"reaguoti";
importuoti { Swiper, SwiperSlide } iš"perbraukimas / reaguoti";
importuoti { Navigacija } iš"swiper";
importuoti"swiper/css";
importuoti"swiper/css/navigation";funkcijaProgramėlė() {
grąžinti (
spaceBetween={30}
slidesPerView={2}
modules={[Navigacija]}
kilpa={tiesa}
navigation={tiesa}
><divklasės pavadinimas="elementas">1 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">2 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">3 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">4 elementasdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportuotinumatytas Programėlė;
Šis kodo blokas importuoja Navigacija modulį ir jo CSS stilių, tada nurodo modulį moduliai rekvizitas Swiper komponentas. The moduliai prop įgalina ir sukonfigūruoja „Swiper“ bibliotekos teikiamus modulius.
Navigacijos modulis suteikia komponento Swiper navigacijos funkciją. Prideda ankstesnės ir kitos rodyklių mygtukus, kuriuos galite spustelėti arba bakstelėti, kad pereitumėte į ankstesnę arba kitą skaidrę.
The navigacija prop vertė yra tiesa, todėl ekrane bus rodomi ankstesni ir sekantys mygtukai.
Perbraukiamų sąsajų konfigūravimas naudojant automatinį paleidimą
The Automatinis paleidimas modulis leidžia slankikliui automatiškai pereiti iš vienos skaidrės į kitą be vartotojo įsikišimo.
Štai pavyzdys, kaip sukonfigūruoti braukiamą sąsają naudojant Automatinis paleidimas modulis:
importuoti Reaguoti iš"reaguoti";
importuoti { Swiper, SwiperSlide } iš"perbraukimas / reaguoti";
importuoti { Automatinis paleidimas } iš"swiper";
importuoti"swiper/css";
importuoti"swiper/css/autoplay";funkcijaProgramėlė() {
grąžinti (
spaceBetween={30}
slidesPerView={2}
modules={[Automatinis paleidimas]}
kilpa={tiesa}
autoplay={{ delsimas: 3000 }}
><divklasės pavadinimas="elementas">1 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">2 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">3 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">4 elementasdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportuotinumatytas Programėlė;
Naudojant automatinis paleidimas prop, galite nurodyti delsimas; šiuo atveju jis nustatytas į 3000 milisekundžių.
Perbraukiamų sąsajų konfigūravimas naudojant puslapius
Kitas svarbus „Swiper“ modulis yra Puslapių rašymas. The Puslapių rašymas modulis leidžia prie slankiklio pridėti puslapių žymėjimo ženklelius arba eigos juostos indikatorius, suteikiančius vartotojams vaizdinį skaidrių skaičiaus ir dabartinės padėties slankyklėje vaizdą.
Norėdami naudoti Puslapių rašymas modulį, turite jį importuoti ir įtraukti į moduliai rekvizitas Swiper komponentas:
importuoti Reaguoti iš"reaguoti";
importuoti { Swiper, SwiperSlide } iš"perbraukimas / reaguoti";
importuoti { Puslapiai } iš"swiper";
importuoti"swiper/css";
importuoti"swiper/css/pagination";funkcijaProgramėlė() {
grąžinti (
spaceBetween={30}
slidesPerView={2}
modules={[puslapis]}
kilpa={tiesa}
puslapių skaičius={{ spustelėti: tiesa }}
><divklasės pavadinimas="elementas">1 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">2 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">3 elementasdiv></SwiperSlide> <divklasės pavadinimas="elementas">4 elementasdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportuotinumatytas Programėlė;
Šis kodų blokas suteikia puslapių spausdinimo funkciją su Puslapių rašymas modulis. Tai taip pat leidžia vartotojams spustelėti puslapiavimas kulkas nustatydami spustelėti nuosavybė puslapiavimas remtis tiesa.
Be Swiper bibliotekos puslapiavimas modulis, reaguoti-paginuoti yra dar viena puiki galimybė kurti puslapius „React“ programoje.
Kurkite prieinamas programas naudodami „React“.
Perbraukiamos sąsajos pagerina jūsų programos naudotojo patirtį jutiklinio ekrano naudotojams. „Swiper“ siūlo daug lankstumo ir galite lengvai pritaikyti ją pagal savo programos poreikius.
Įvairios vartotojo sąsajos bibliotekos gali padėti padaryti jūsų „React“ programas labiau prieinamas. Šiose bibliotekose yra funkcijų ir funkcijų, kurios pagerina jūsų programos vartotojo patirtį.
