Lær, hvordan dette praktiske bibliotek kan aktivere en swipebar grænseflade i dine apps med minimal indsats.
Efterhånden som mobile enheder bliver mere populære, er swipebare grænseflader blevet en standard måde at interagere med applikationer på. Swipeable grænseflader er afgørende for at give den bedste brugeroplevelse til mobile brugere.
Swiper er et alsidigt bibliotek, der lader dig oprette swipe-grænseflader i dine React-applikationer. Opdag, hvordan du kan oprette swipe-grænseflader i din React-applikation ved hjælp af Swiper.
Installerer Swiper
Swiper er et af de mange biblioteker, du kan bruge til at tilpasse din React-applikation. For at komme i gang med Swiper skal du installere det i din React-applikation. Du kan gøre dette med følgende terminalkommando, som du skal køre i dit projekts rodmappe:
npm installer swiper
Når du har installeret Swiper, kan du bruge det i din applikation.
Oprettelse af swipeable grænseflader
Efter at have installeret Swiper i din React-applikation, kan du oprette swipe-grænseflader. Start med at importere
Swiper og SwiperSlide komponenter fra Swiper-biblioteket.Swiper-komponenten er kernekomponenten i Swiper-biblioteket. Det definerer de swipebare elementers struktur, adfærd og funktionalitet. SwiperSlide-komponenten er en underordnet komponent af Swiper-komponenten. Den definerer individuelle dias, der er inden for Swiper-komponenten.
Her er et eksempel på en swipebar grænseflade, der bruger Swiper- og SwiperSlide-komponenterne:
importere Reagere fra'reagere';
importere { Swiper, SwiperSlide} fra"swiper/reager";
importere'swiper/css';fungereApp() {
Vend tilbage (<divklassenavn='element'>Element 1div></SwiperSlide> <divklassenavn='element'>Element 2div></SwiperSlide> <divklassenavn='element'>Element 3div></SwiperSlide> <divklassenavn='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
eksportStandard App
Ud over Swiper og SwiperSlide komponenter, importerer denne kodeblok standardstilarket for Swiper ved hjælp af swiper/css modul.
Eksemplet vikler derefter en Swiper-komponent omkring fire SwiperSlide-underordnede komponenter. Hver SwiperSlide indeholder en div element med klassenavn attribut. Du kan bruge className til at style div-elementerne:
.element {
inline-størrelse: 100px;
grænse-radius: 12px;
polstring: 1rem;
farve: #333333;
baggrundsfarve: #e2e2e2;
skrifttype-familie: kursiv;
}
Tilpasning af din swipebare grænseflade
Efter at have oprettet en swipebar grænseflade, kan du forbedre dens udseende og funktionalitet, så den passer til dine krav.
Med Swiper kan du tilpasse grænsefladens adfærd og udseende ved hjælp af forskellige muligheder. Du videregiver disse muligheder til Swiper komponent som rekvisitter i React:
importere Reagere fra'reagere';
importere { Swiper, SwiperSlide} fra"swiper/reager";
importere'swiper/css';fungereApp() {
Vend tilbage (
spaceBetween={30}
slidesPerView={2}
loop={ rigtigt }
><divklassenavn='element'>Element 1div></SwiperSlide> <divklassenavn='element'>Element 2div></SwiperSlide> <divklassenavn='element'>Element 3div></SwiperSlide> <divklassenavn='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
eksportStandard App
I dette eksempel tager Swiper-komponenten tre rekvisitter: mellemrum mellem, slidesPerView, og sløjfe. Det mellemrum mellem prop indstiller afstanden mellem hvert dias, i dette tilfælde 30 pixels.
Bruger slidesPerView prop, kan du indstille antallet af synlige slides på én gang. I dette tilfælde slidesPerView prop er sat til 2, hvilket forårsager Swiper komponent til at vise to dias samtidigt.
Til sidst sløjfe prop angiver, om slides skal loop uendeligt eller ej. I dette eksempel vil slides loop uendeligt, fordi sløjfe prop værdi er rigtigt.
Konfiguration af dine swipeable grænseflader med moduler
Du kan yderligere konfigurere din swipebare grænseflades adfærd med JavaScript-moduler leveret af Swiper-biblioteket. Nogle af de moduler, det giver, er Navigation, Automatisk afspilning, Sideinddeling, og Rullebar.
For at bruge nogen af disse moduler i din applikation skal du importere dem fra Swiper-biblioteket. Du bør også importere de tilsvarende CSS-stile til modulerne og videregive deres navne til Swiper komponent ved hjælp af moduler rekvisit.
For eksempel er det sådan, du kan bruge Navigation modul til at konfigurere dine swipebare grænseflader:
importere Reagere fra"reagere";
importere { Swiper, SwiperSlide } fra"swiper/reager";
importere { Navigation } fra"swiper";
importere"swiper/css";
importere"swiper/css/navigation";fungereApp() {
Vend tilbage (
spaceBetween={30}
slidesPerView={2}
moduler={[Navigation]}
loop={rigtigt}
navigation={rigtigt}
><divklassenavn="element">Element 1div></SwiperSlide> <divklassenavn="element">Element 2div></SwiperSlide> <divklassenavn="element">Element 3div></SwiperSlide> <divklassenavn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
eksportStandard App;
Denne kodeblok importerer Navigation modul og dets CSS-stil, specificerer derefter modulet i moduler rekvisit af Swiper komponent. Det moduler prop aktiverer og konfigurerer moduler leveret af Swiper-biblioteket.
Navigationsmodulet giver navigationsfunktionalitet til Swiper-komponenten. Den tilføjer forrige og næste pileknapper, som du kan klikke på eller trykke på for at flytte til det forrige eller næste dias.
Det navigation prop-værdien er sand, hvilket vil få forrige og næste knapper til at blive vist på skærmen.
Konfiguration af swipeable grænseflader med AutoPlay
Det Automatisk afspilning modul tillader skyderen at skifte mellem slides automatisk uden brugerinteraktion.
Her er et eksempel på, hvordan du konfigurerer din swipebare grænseflade ved hjælp af Automatisk afspilning modul:
importere Reagere fra"reagere";
importere { Swiper, SwiperSlide } fra"swiper/reager";
importere { Automatisk afspilning } fra"swiper";
importere"swiper/css";
importere"swiper/css/autoplay";fungereApp() {
Vend tilbage (
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
loop={rigtigt}
autoplay={{ forsinke: 3000 }}
><divklassenavn="element">Element 1div></SwiperSlide> <divklassenavn="element">Element 2div></SwiperSlide> <divklassenavn="element">Element 3div></SwiperSlide> <divklassenavn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
eksportStandard App;
Bruger automatisk afspilning prop, kan du angive forsinke; i dette tilfælde er den indstillet til 3000 millisekunder.
Konfiguration af swipebare grænseflader med sideinddeling
Et andet vigtigt Swiper-modul er Sideinddeling. Det Sideinddeling modul giver dig mulighed for at tilføje pagineringspunkter eller statuslinjeindikatorer til skyderen, hvilket giver brugerne en visuel repræsentation af antallet af dias og deres aktuelle position i skyderen.
For at bruge Sideinddeling modul, skal du importere det og inkludere det i moduler rekvisit af Swiper komponent:
importere Reagere fra"reagere";
importere { Swiper, SwiperSlide } fra"swiper/reager";
importere { Sideinddeling } fra"swiper";
importere"swiper/css";
importere"swiper/css/paginering";fungereApp() {
Vend tilbage (
spaceBetween={30}
slidesPerView={2}
modules={[Søgeside]}
loop={rigtigt}
paginering={{ klikbar: rigtigt }}
><divklassenavn="element">Element 1div></SwiperSlide> <divklassenavn="element">Element 2div></SwiperSlide> <divklassenavn="element">Element 3div></SwiperSlide> <divklassenavn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
eksportStandard App;
Denne kodeblok giver sideinddelingsfunktionaliteten med Sideinddeling modul. Det giver også brugere mulighed for at klikke på paginering kugler ved at indstille klikbar ejendom af paginering prop til sandt.
Ud over Swiper bibliotekets paginering modul, reagere-paginere er en anden glimrende mulighed for at oprette paginering i din React-applikation.
Byg tilgængelige applikationer med React
Swipeable grænseflader forbedrer brugeroplevelsen af din applikation for touchscreen-brugere. Swiper tilbyder masser af fleksibilitet, og du kan nemt tilpasse den efter behovene i din app.
Forskellige UI-biblioteker kan hjælpe med at gøre dine React-applikationer mere tilgængelige. Disse biblioteker giver funktioner og funktionalitet, der forbedrer brugeroplevelsen af din applikation.
