Ismerje meg, hogyan tud ez a kényelmes könyvtár minimális erőfeszítéssel lehetővé tenni az elhúzható felületet az alkalmazásokban.
Ahogy a mobileszközök egyre népszerűbbé válnak, az áthúzható felületek az alkalmazásokkal való interakció szokásos módjává váltak. Az áthúzható felületek elengedhetetlenek ahhoz, hogy a legjobb felhasználói élményt nyújtsák a mobilfelhasználóknak.
A Swiper egy sokoldalú könyvtár, amely lehetővé teszi, hogy húzható felületeket hozzon létre a React alkalmazásaiban. Fedezze fel, hogyan hozhat létre húzható felületeket a React alkalmazásban a Swiper segítségével.
Swiper telepítése
A Swiper egyike azon számos könyvtárnak, amelyek segítségével személyre szabhatja React alkalmazását. A Swiper használatának megkezdéséhez telepítenie kell a React alkalmazásba. Ezt a következő terminálparancs segítségével teheti meg, amelyet a projekt gyökérkönyvtárában kell futtatnia:
npm swiper telepítése
A Swiper telepítése után használhatja az alkalmazásban.
Csúsztatható interfészek létrehozása
Miután telepítette a Swipert a React alkalmazásba, húzható felületeket hozhat létre. Kezdje azzal, hogy importálja a Swiper és SwiperSlide összetevőket a Swiper könyvtárból.
A Swiper összetevő a Swiper könyvtár alapvető összetevője. Meghatározza az ellopható elemek szerkezetét, viselkedését és funkcióit. A SwiperSlide összetevő a Swiper összetevő gyermekkomponense. Meghatározza az egyes diákat, amelyek a Swiper komponensen belül vannak.
Íme egy példa a Swiper és SwiperSlide összetevőket használó húzható felületre:
import Reagál tól től'reagál';
import { Swiper, SwiperSlide} tól től"swiper/react";
import"swiper/css";funkcióApp() {
Visszatérés (<divosztály név='elem'>1. elemdiv></SwiperSlide> <divosztály név='elem'>2. elemdiv></SwiperSlide> <divosztály név='elem'>3. elemdiv></SwiperSlide> <divosztály név='elem'>4. elemdiv></SwiperSlide>
</Swiper>
</div>
)
}
exportalapértelmezett App
Amellett, hogy a Swiper és SwiperSlide összetevőket, ez a kódblokk a Swiper alapértelmezett stíluslapját importálja a swiper/css modul.
A példa ezután egy Swiper-komponenst von be négy SwiperSlide gyermekkomponens köré. Minden SwiperSlide tartalmaz egy div elem a osztály név tulajdonság. A className segítségével stílusozhatja a div elemeket:
.elem {
soros méretű: 100px;
határ-sugár: 12px;
párnázás: 1rem;
szín: #333333;
háttérszín: #e2e2e2;
betűtípus család: kurzív;
}
Az ellopható felület testreszabása
Az ellopható felület sikeres létrehozása után az igényeinek megfelelően javíthatja megjelenését és funkcionalitását.
A Swiper segítségével testreszabhatja a felület viselkedését és megjelenését különféle lehetőségek segítségével. Ezeket a lehetőségeket átadja a Swiper komponens mint kellékek a Reactban:
import Reagál tól től'reagál';
import { Swiper, SwiperSlide} tól től"swiper/react";
import"swiper/css";funkcióApp() {
Visszatérés (
spaceBetween={30}
slidesPerView={2}
loop={ igaz }
><divosztály név='elem'>1. elemdiv></SwiperSlide> <divosztály név='elem'>2. elemdiv></SwiperSlide> <divosztály név='elem'>3. elemdiv></SwiperSlide> <divosztály név='elem'>4. elemdiv></SwiperSlide>
</Swiper>
</div>
)
}
exportalapértelmezett App
Ebben a példában a Swiper összetevő három kelléket vesz fel: space Között, slidesPerView, és hurok. A space Között prop beállítja az egyes diák közötti távolságot, jelen esetben 30 képpontot.
Használni a slidesPerView prop, beállíthatja az egyszerre látható diák számát. Ebben az esetben a slidesPerView prop 2-re van állítva, ami a Swiper komponens két dia egyidejű megjelenítéséhez.
Végül a hurok A prop megadja, hogy a diáknak végtelenül kell-e hurkolnia vagy sem. Ebben a példában a diák a végtelenségig hurkolni fog, mert a hurok prop értéke az igaz.
Csúsztatható interfészek konfigurálása modulokkal
Tovább konfigurálhatja az ellopható felület viselkedését a következővel JavaScript modulok a Swiper könyvtár biztosítja. Néhány modult biztosít Navigáció, Automatikus lejátszás, Lapszámozás, és Görgetősáv.
Ha ezeket a modulokat szeretné használni az alkalmazásban, importálnia kell őket a Swiper könyvtárból. Ezenkívül importálnia kell a megfelelő CSS-stílusokat a modulokhoz, és át kell adnia a nevüket a Swiper komponens segítségével modulok támaszt.
Például így használhatja a Navigáció modul az ellopható felületek konfigurálásához:
import Reagál tól től"reagál";
import { Swiper, SwiperSlide } tól től"swiper/react";
import { Navigáció } tól től"swiper";
import"swiper/css";
import"swiper/css/navigation";funkcióApp() {
Visszatérés (
spaceBetween={30}
slidesPerView={2}
modules={[Navigáció]}
loop={igaz}
navigation={igaz}
><divosztály név="elem">1. elemdiv></SwiperSlide> <divosztály név="elem">2. elemdiv></SwiperSlide> <divosztály név="elem">3. elemdiv></SwiperSlide> <divosztály név="elem">4. elemdiv></SwiperSlide>
</Swiper>
</div>
);
}
exportalapértelmezett App;
Ez a kódblokk importálja a Navigáció modult és annak CSS-stílusát, majd megadja a modult a modulok kelléke a Swiper összetevő. A modulok prop engedélyezi és konfigurálja a Swiper könyvtár által biztosított modulokat.
A Navigációs modul navigációs funkciókat biztosít a Swiper komponens számára. Hozzáadja az előző és a következő nyílgombokat, amelyekre kattintva az előző vagy a következő diára ugorhat.
A navigáció prop érték igaz, ami miatt az előző és a következő gombok megjelennek a képernyőn.
Csúsztatható interfészek konfigurálása automatikus lejátszással
A Automatikus lejátszás modul lehetővé teszi, hogy a csúszka automatikusan, felhasználói beavatkozás nélkül váltson át a diák között.
Íme egy példa arra, hogyan konfigurálhatja az ellopható felületet a Automatikus lejátszás modul:
import Reagál tól től"reagál";
import { Swiper, SwiperSlide } tól től"swiper/react";
import { Automatikus lejátszás } tól től"swiper";
import"swiper/css";
import"swiper/css/autoplay";funkcióApp() {
Visszatérés (
spaceBetween={30}
slidesPerView={2}
modules={[Automatikus lejátszás]}
loop={igaz}
autoplay={{ késleltetés: 3000 }}
><divosztály név="elem">1. elemdiv></SwiperSlide> <divosztály név="elem">2. elemdiv></SwiperSlide> <divosztály név="elem">3. elemdiv></SwiperSlide> <divosztály név="elem">4. elemdiv></SwiperSlide>
</Swiper>
</div>
);
}
exportalapértelmezett App;
Használni a automatikus lejátszás prop, megadhatja a késleltetés; ebben az esetben 3000 ezredmásodpercre van beállítva.
Lapozható felületek konfigurálása lapozással
Egy másik fontos Swiper modul az Lapszámozás. A Lapszámozás A modul lehetővé teszi oldalszámozási pontok vagy folyamatjelző jelzők hozzáadását a csúszkához, így a felhasználók vizuálisan megjeleníthetik a diák számát és a csúszkán belüli aktuális helyzetüket.
Használatához a Lapszámozás modult, importálnia kell, és bele kell foglalnia a modulok kelléke a Swiper összetevő:
import Reagál tól től"reagál";
import { Swiper, SwiperSlide } tól től"swiper/react";
import { Lapozás } tól től"swiper";
import"swiper/css";
import"swiper/css/oldalszámozás";funkcióApp() {
Visszatérés (
spaceBetween={30}
slidesPerView={2}
modules={[oldalszámozás]}
loop={igaz}
oldalszámozás={{ kattintható: igaz }}
><divosztály név="elem">1. elemdiv></SwiperSlide> <divosztály név="elem">2. elemdiv></SwiperSlide> <divosztály név="elem">3. elemdiv></SwiperSlide> <divosztály név="elem">4. elemdiv></SwiperSlide>
</Swiper>
</div>
);
}
exportalapértelmezett App;
Ez a kódblokk biztosítja a lapozási funkciót a Lapszámozás modul. Azt is lehetővé teszi a felhasználók számára, hogy a lapszámozás golyók beállításával a kattintható tulajdona a lapszámozás igaznak kell lennie.
A Swiper könyvtárán kívül lapszámozás modul, reagál-lapoz egy másik kiváló lehetőség oldalszámozás létrehozására a React alkalmazásban.
Hozzáférhető alkalmazások létrehozása a React segítségével
Az áthúzható felületek javítják az alkalmazás felhasználói élményét az érintőképernyős felhasználók számára. A Swiper rengeteg rugalmasságot kínál, és könnyedén testreszabhatja az alkalmazás igényei szerint.
Különféle felhasználói felület-könyvtárak segíthetnek a React-alkalmazások elérhetőbbé tételében. Ezek a könyvtárak olyan szolgáltatásokat és funkciókat biztosítanak, amelyek javítják az alkalmazás felhasználói élményét.
