Uzziniet, kā šī ērtā bibliotēka var iespējot velkamu saskarni jūsu lietotnēs ar minimālu piepūli.
Tā kā mobilās ierīces kļūst arvien populārākas, pārvelkamās saskarnes ir kļuvušas par standarta veidu, kā mijiedarboties ar lietojumprogrammām. Pārvelkamās saskarnes ir būtiskas, lai mobilo ierīču lietotājiem nodrošinātu vislabāko lietošanas pieredzi.
Swiper ir daudzpusīga bibliotēka, kas ļauj izveidot pārvelkamas saskarnes jūsu React lietojumprogrammās. Uzziniet, kā savā React lietojumprogrammā varat izveidot pārvelkamas saskarnes, izmantojot Swiper.
Swiper instalēšana
Swiper ir viena no daudzajām bibliotēkām, ko varat izmantot, lai pielāgotu savu React lietojumprogrammu. Lai sāktu darbu ar Swiper, tas ir jāinstalē savā React lietojumprogrammā. To var izdarīt ar šādu termināļa komandu, kas jāpalaiž sava projekta saknes direktorijā:
npm instalējiet swiper
Kad esat instalējis Swiper, varat to izmantot savā lietojumprogrammā.
Pārvelkamu interfeisu izveide
Pēc Swiper instalēšanas savā React lietojumprogrammā varat izveidot pārvelkamas saskarnes. Sāciet, importējot
Swiper un SwiperSlide komponenti no Swiper bibliotēkas.Swiper komponents ir Swiper bibliotēkas pamatkomponents. Tas nosaka pārvelkamo elementu struktūru, uzvedību un funkcionalitāti. Komponents SwiperSlide ir komponenta Swiper pakārtotais komponents. Tas nosaka atsevišķus slaidus, kas atrodas Swiper komponentā.
Tālāk ir sniegts velkamās saskarnes piemērs, izmantojot komponentus Swiper un SwiperSlide.
imports Reaģēt no'reaģēt';
imports { Swiper, SwiperSlide} no"swiper/reaģēt";
imports"swiper/css";funkcijuApp() {
atgriezties (<divklasesNosaukums='elements'>1. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>2. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>3. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>4. elementsdiv></SwiperSlide>
</Swiper>
</div>
)
}
eksportētnoklusējuma App
Papildus tam Swiper un SwiperSlide komponenti, šis koda bloks importē Swiper noklusējuma stila lapu, izmantojot swiper/css modulis.
Pēc tam piemērā Swiper komponents tiek apvilkts ap četriem SwiperSlide pakārtotajiem komponentiem. Katrs SwiperSlide satur a div elements ar klasesNosaukums atribūts. Varat izmantot className, lai veidotu div elementus:
.elements {
iekļauts izmērs: 100px;
robeža-rādiuss: 12px;
polsterējums: 1rem;
krāsa: #333333;
fona krāsa: #e2e2e2;
fontu ģimene: kursīvs;
}
Pārvelkamā interfeisa pielāgošana
Pēc veiksmīgas pārvelkamas saskarnes izveides varat uzlabot tā izskatu un funkcionalitāti atbilstoši savām prasībām.
Izmantojot Swiper, varat pielāgot saskarnes darbību un izskatu, izmantojot dažādas opcijas. Jūs nododat šīs opcijas Swiper komponents kā rekvizīti programmā React:
imports Reaģēt no'reaģēt';
imports { Swiper, SwiperSlide} no"swiper/reaģēt";
imports"swiper/css";funkcijuApp() {
atgriezties (
spaceBetween={30}
slidesPerView={2}
cilpa={ taisnība }
><divklasesNosaukums='elements'>1. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>2. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>3. elementsdiv></SwiperSlide> <divklasesNosaukums='elements'>4. elementsdiv></SwiperSlide>
</Swiper>
</div>
)
}
eksportētnoklusējuma App
Šajā piemērā Swiper komponents ietver trīs rekvizītus: telpa Starp, slidesPerView, un cilpa. The telpa Starp prop iestata atstarpi starp katru slaidu, šajā gadījumā 30 pikseļus.
Izmantojot slidesPerView prop, varat iestatīt vienlaikus redzamo slaidu skaitu. Šajā gadījumā, slidesPerView prop ir iestatīts uz 2, izraisot Swiper komponents, lai vienlaikus parādītu divus slaidus.
Visbeidzot, cilpa prop norāda, vai slaidiem jābūt bezgalīgi vai nē. Šajā piemērā slaidi tiks cilāti bezgalīgi, jo cilpa prop vērtība ir taisnība.
Pārvelkamo interfeisu konfigurēšana ar moduļiem
Pārvelkamās saskarnes darbību varat tālāk konfigurēt, izmantojot JavaScript moduļi nodrošina Swiper bibliotēka. Daži no tā nodrošinātajiem moduļiem ir Navigācija, Automātiskā atskaņošana, Lapu šķirošana, un Ritjosla.
Lai savā lietojumprogrammā izmantotu kādu no šiem moduļiem, tie ir jāimportē no Swiper bibliotēkas. Jums vajadzētu arī importēt atbilstošos CSS stilus moduļiem un nodot to nosaukumus Swiper komponents, izmantojot moduļi prop.
Piemēram, šādi varat izmantot Navigācija modulis, lai konfigurētu pārvelkamās saskarnes:
imports Reaģēt no"reaģēt";
imports { Swiper, SwiperSlide } no"swiper/reaģēt";
imports { Navigācija } no"swiper";
imports"swiper/css";
imports"swiper/css/navigation";funkcijuApp() {
atgriezties (
spaceBetween={30}
slidesPerView={2}
modules={[Navigācija]}
cilpa={taisnība}
navigācija={taisnība}
><divklasesNosaukums="elements">1. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">2. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">3. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">4. elementsdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportētnoklusējuma Lietotne;
Šis koda bloks importē Navigācija moduli un tā CSS stilu, pēc tam norāda moduli moduļi rekvizīti Swiper komponents. The moduļi prop iespējo un konfigurē Swiper bibliotēkas nodrošinātos moduļus.
Navigācijas modulis nodrošina navigācijas funkcionalitāti komponentam Swiper. Tas pievieno iepriekšējās un nākamās bultiņu pogas, uz kurām varat noklikšķināt vai pieskarties, lai pārietu uz iepriekšējo vai nākamo slaidu.
The navigācija prop vērtība ir patiesa, kā rezultātā ekrānā tiks parādītas iepriekšējās un nākamās pogas.
Pārvelkamo interfeisu konfigurēšana, izmantojot automātisko atskaņošanu
The Automātiskā atskaņošana modulis ļauj slīdnim automātiski pārslēgties starp slaidiem bez lietotāja iejaukšanās.
Tālāk ir sniegts piemērs, kā konfigurēt velkamo interfeisu, izmantojot Automātiskā atskaņošana modulis:
imports Reaģēt no"reaģēt";
imports { Swiper, SwiperSlide } no"swiper/reaģēt";
imports { Automātiskā atskaņošana } no"swiper";
imports"swiper/css";
imports"swiper/css/autoplay";funkcijuApp() {
atgriezties (
spaceBetween={30}
slidesPerView={2}
modules={[Automātiskā atskaņošana]}
cilpa={taisnība}
autoplay={{ kavēšanās: 3000 }}
><divklasesNosaukums="elements">1. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">2. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">3. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">4. elementsdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportētnoklusējuma Lietotne;
Izmantojot automātiskā atskaņošana prop, varat norādīt kavēšanās; šajā gadījumā tas ir iestatīts uz 3000 milisekundēm.
Pārvelkamo saskarņu konfigurēšana ar lappušu šķirošanu
Vēl viens svarīgs Swiper modulis ir Lapu šķirošana. The Lapu šķirošana modulis ļauj slīdnim pievienot lappušu aizzīmes vai progresa joslas indikatorus, sniedzot lietotājiem vizuālu priekšstatu par slaidu skaitu un to pašreizējo pozīciju slīdnī.
Lai izmantotu Lapu šķirošana moduli, jums tas ir jāimportē un jāiekļauj moduļi rekvizīti Swiper komponents:
imports Reaģēt no"reaģēt";
imports { Swiper, SwiperSlide } no"swiper/reaģēt";
imports { Lappuse } no"swiper";
imports"swiper/css";
imports"swiper/css/pagination";funkcijuApp() {
atgriezties (
spaceBetween={30}
slidesPerView={2}
modules={[lappuse]}
cilpa={taisnība}
pagenation={{ noklikšķināms: taisnība }}
><divklasesNosaukums="elements">1. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">2. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">3. elementsdiv></SwiperSlide> <divklasesNosaukums="elements">4. elementsdiv></SwiperSlide>
</Swiper>
</div>
);
}
eksportētnoklusējuma Lietotne;
Šis koda bloks nodrošina lappušu veidošanas funkcionalitāti ar Lapu šķirošana modulis. Tas arī ļauj lietotājiem noklikšķināt uz lappuse lodes, iestatot noklikšķināms īpašums lappuse balstoties uz patiesību.
Papildus Swiper bibliotēkai lappuse modulis, reaģēt-paginat ir vēl viena lieliska iespēja React lietojumprogrammā izveidot lappusi.
Izveidojiet pieejamas lietojumprogrammas, izmantojot React
Pārvelkamas saskarnes uzlabo jūsu lietojumprogrammas lietošanas pieredzi skārienekrāna lietotājiem. Swiper piedāvā daudz elastības, un jūs varat to viegli pielāgot atbilstoši savas lietotnes vajadzībām.
Dažādas lietotāja saskarnes bibliotēkas var palīdzēt padarīt jūsu React lietojumprogrammas pieejamākas. Šīs bibliotēkas nodrošina līdzekļus un funkcionalitāti, kas uzlabo jūsu lietojumprogrammas lietošanas pieredzi.