de Fabian Hinsenkamp

Un carusel, o prezentare de diapozitive sau un glisor – așa cum îl numiți această clasă de interfață – a devenit unul dintre elementele de bază utilizate în dezvoltarea web modernă. Astăzi, este aproape imposibil să găsești orice site web sau bibliotecă UI care să nu vină cu unul sau alt tip de carusel.

De ce totuși? De fapt, caruselele merită cu adevărat popularitatea lor. Acestea permit utilizatorilor să parcurgă conținutul disponibil fără derulare verticală sau mișcări grele ale mouse-ului. În consecință, utilizatorii economisesc timp și se pot concentra asupra conținutului afișat, deoarece caruselele mențin sarcina cognitivă la un nivel minim.

Acesta este motivul suficient pentru a învăța cum să construiți un carusel în VueJS!

Cum sa proiectati si sa construiti o caracteristica carusel in

Toate tutorialele mele gravitează în jurul aplicațiilor Progressive Vue. Aceasta nu face excepție! Realizarea de aplicații progresive înseamnă livrarea unui UX pentru utilizatorii de telefonie mobilă aproape de aplicațiile native, inclusiv performanțe excelente, caracteristici native precum notificări push, experiență offline și multe altele. Într-o lume în care majoritatea utilizatorilor experimentează Webul prin dispozitive mobile, nu mai există nicio scuză pentru a nu crea aplicații progresive!

Desigur, puteți utiliza în continuare Caruselul în orice aplicație Vue. De asemenea, nu aveți nevoie de experiență anterioară cu VueJS sau Progresive Web Apps pentru acest tutorial!

Codul complet îl găsiți aici:

https://github.com/fh48/vue-pwa-carousel

Primul lucru pe care îl vom face este să obținem o imagine de ansamblu asupra tipurilor de componente pe care dorim să le construim.

Cum sa proiectati si sa construiti o caracteristica carusel in

Există câteva foarte simple:

  • Card → deține informațiile fiecărui element carusel.
  • Carusel → părinte care deține toată logica
  • ArrowButton → ajută la navigarea între mai multe cărți.
  • Indicator → arată numărul de cărți și care este vizibil în prezent.

Configurare inițială

Dacă doriți să aflați cum să configurați un proiect, această secțiune este pentru dvs. În caz contrar, continuați cu secțiunea următoare.

vue init pwa vue-pwa-carousel

Vi se va solicita să alegem o presetare – Vă recomandăm următoarea configurație:

? Project name vue-pwa-carousel? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) vue-pwa-carousel? Project description A simple tax calculator ? Author Fabian Hinsenkamp? Vue build runtime? Install vue-router? No? Use ESLint to lint your code? No? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No

Alerga yarn în folderul rădăcină al proiectului pentru a instala toate dependențele. Acum avem o configurare a proiectului care include tehnologiile de bază de care avem nevoie pentru a ne construi caruselul. Mai mult, include deja un Service Worker care pre-cache toate fișierele noastre statice și permite utilizatorilor să acceseze aplicația chiar și atunci când sunt offline.

Puteți verifica cum arată aplicația șablon rulând yarn start.

Pentru a testa aspectul caruselului pe mobil, trebuie să expunem construcția noastră de dezvoltare dispozitivelor mobile printr-o adresă URL publică. Există multe modalități de a face acest lucru, dar aici le folosim ngrok deoarece este ușor de configurat și doar își face treaba.

yarn global add ngrok

Apoi, trebuie să rulăm serverul nostru dev și ngrok în două terminale separate.

Să construim Cardul!

1611540009 394 Cum sa proiectati si sa construiti o caracteristica carusel in

Pentru a vă salva câteva ajustări plictisitoare la aplicația șablon, trebuie doar să consultați această ramură00_basicSetup. Include toate datele și stilurile de care avem nevoie pentru a face această aplicație semnificativă și drăguță.

Cardul face cu adevărat un singur lucru: arată datele selectate în prezent. Ceea ce este, în cazul nostru, un imagine, A titlu si ceva text.

În mod clar, nu vrem să construim mai multe cărți cu conținut codat greu. În schimb, vrem să transmitem dinamic datele pe card și să le redăm pur și simplu.

Pe baza acestor cunoștințe, acum ne putem crea Card.vue fișier în src/components pliant. Mai mult decât atât, putem defini deja structura și numele html de bază și tipurile lor de proprietăți pe care dorim să le transmitem cardului.

Atenție: stocăm toate pictogramele pe care dorim să le afișăm local în folderul nostru de active. Asta înseamnă că calea noastră rămâne aceeași, dar trebuie să schimbăm dinamic numele fișierelor care ar trebui redate. În consecință, toate proprietățile sunt de tip String.

Apoi, facem Card redați titlul și textul aferent. Prin urmare, folosim cel mai simplu mod de legare a datelor în VueJS – eticheta mustață.

Practic, este vorba doar de aparate dentare în jurul variabilelor noastre prop. De îndată ce intră datele, {{headline}} și {{text}} va fi înlocuit cu obiectul de date aferent. Acest lucru este întotdeauna adevărat, de asemenea, atunci când intră date noi, după ce a redat alte date înainte.

Redarea dinamică a imaginii este puțin mai dificilă. Amintiți-vă, nu trecem pictograma reală, ci doar numele fișierului acesteia.

Deci, vrem practic să consumăm imaginea ca un modul, ca orice altă componentă. O imagine statică pe care am putea-o consuma importând-o în blocul de scripturi și atribuind-o unei variabile. Cu toate acestea, avem o cale în schimbare. Deoarece aplicația noastră folosește webpack, există o scurtătură fantastică disponibilă pentru a le încărca dinamic, după cum urmează:

:src="https://www.freecodecamp.org/news/how-to-design-and-build-a-carousel-feature-in-vuejs-125f690a3a9e/require(`@/assets/svg/${imgName}`)"

: sintaxa este Vue-way pentru a lega dinamic atributele la o expresie. S-ar putea să fi văzut deja v-bind: prefix care : este prescurtarea pentru.

Acum template blocul este finalizat și arată după cum urmează.

Pentru a finaliza noastre Card componentă, trebuie pur și simplu să adăugăm stilul pregătit în partea de jos a fișierului.

<style src="https://www.freecodecamp.org/news/how-to-design-and-build-a-carousel-feature-in-vuejs-125f690a3a9e/assets/styles/Card.css" scoped>

Ultimul lucru pe care trebuie să îl facem pentru această secțiune este să verificăm dacă Card funcționează de fapt.

Deci, hai să-l adăugăm pur și simplu al nostru App.vue componentă. Cu toate acestea, rețineți că va trebui să mutăm componenta în Carusel componentă din secțiunea următoare.

Adăugăm următoarele la <template>; and &lt; script>; blocks din App.vue.

Ce rezultat fantastic! Mai ales, deoarece putem schimba deja dinamic orice Card ar trebui să afișeze!

1611540009 826 Cum sa proiectati si sa construiti o caracteristica carusel in

Apoi, construim Carusel să aibă o componentă dedicată pentru a gestiona toată logica în jurul afișării diferite Carduri pe baza intrărilor utilizatorului.

Verificați filiala 01_Card dacă doriți să începeți de aici sau să comparați implementarea.

Carusel va fi componenta noastră părinte reutilizabilă. Acesta va încapsula toate componentele relevante și logica.

La fel ca în cazul cardului anterior, ar trebui să ne concentrăm asupra construirii componentei astfel încât să poată face față unei schimbări de date cu grație. De exemplu, ar trebui să poată gestiona un număr diferit de cărți care îi sunt transmise.

În continuare vom vedea cum această abordare se traduce prin cod. Mai întâi începem cu crearea unui Carusel componenta și faceți Card un copil de Carusel.

Blocul șablon al noii componente găzduiește Card, înfășurat în două elemente de înfășurare. Vom vedea mai târziu de ce acestea sunt necesare.

Deoarece vom transmite datele mai multor cărți către carusel, trebuie să specificăm că numai currentElement este redat.

În cele ce urmează <script> bloc trebuie să definim care dintre cărțile trecute is the currentElement în mod implicit.

Prin urmare, definim currentElementIndex inițial să fie 0. VueJS vine cu o caracteristică care ne permite să calculăm variabile dinamic. O folosim pentru a selecta datele cardului care ar trebui redate inițial.

Acum trebuie doar să înlocuim Card cu Carusel în a noastră App.vue fişier. Pentru a pune ceva mai multă structură și semnificație paginii noastre finale, să înfășurăm caruselul într-un alt element de secțiune și să-l plasăm înaintea celeilalte secțiuni.

Aceasta este implementarea noastră de bază. Nu este încă un Carusel încă, dar suntem pe cale să schimbăm acest lucru adăugând butoanele săgeți pentru a comuta între obiectele pe care le trecem în cards matrice pentru a noastră Carusel.

Verificați 02_Carousel pentru a vedea codul complet pentru această secțiune. Dacă ați codat, ar trebui să vedeți următoarele în fața dvs.

Să construim butonul ArrowButton

1611540010 962 Cum sa proiectati si sa construiti o caracteristica carusel in

Acum construim ArrowButton componentă, care primește metodele sale și tipul de pictogramă săgeată de la părintele său. Implementarea în sine este strânsă înainte.

Componenta este responsabilă numai pentru redarea stilurilor corecte și a pictogramei. Toată logica legată de butoane este adăugată la Carusel. În acest fel, am creat o componentă cu adevărat generică pe care am putea-o folosi în orice context în care dorim să folosim un buton cu o pictogramă săgeată.

Acum, înăuntru Carusel, adăugăm două metode pentru a naviga între obiectele noastre de date de card. Metodele sunt doar un alt obiect exportat în cadrul <script> bloc.

Acestea pur și simplu cresc sau scad currentElementIndex de 1. Folosim indexul pentru a calcula currentElement variabilă, deci de fiecare dată când se numește una dintre metode se afișează următoarea carte. De asemenea, adăugăm câteva condiții restrictive, deoarece vrem ca Caruselul să nu se bucle.

Acum trebuie doar să adăugăm Butoane săgeată să ne completăm practic Carusel!

Aici vedeți cum folosim metodele și valorile calculate pentru a implementa una dintre noile noastre Butoane săgeată. Încercați să o implementați pe a doua sub Card componentă.

În cazul în care rămâneți blocat sau ceva pare pur și simplu greșit, verificați 03_ArrowButton ramură. Totuși, dacă totul a funcționat, caruselul dvs. ar trebui să arate după cum urmează:

1611540010 948 Cum sa proiectati si sa construiti o caracteristica carusel in

Să construim indicatori!

1611540010 42 Cum sa proiectati si sa construiti o caracteristica carusel in

Ultima caracteristică pe care o vom adăuga sunt Indicatori. Acestea îi ajută pe utilizatori să înțeleagă câte cărți există și la care se uită în prezent. În plus, acestea permit utilizatorului să selecteze direct cărți individuale.

Componenta primește trei proprietăți. Matricea de elements folosim pentru a crea un <li> element pentru fiecare obiect de date al cardului.

currentElementIndex este necesar pentru a adăuga o clasă CSS care evidențiază indicatorul legat de cardul curent. Mai mult, este folosit pentru a dezactiva butonul pentru cardul curent. În acest fel, împiedicăm selectarea acestuia este prin intermediul tastelor tab. În acest fel, oferim cel puțin un minim de accesibilitate.

showElement este metoda care se numește atunci când un utilizator face clic pe un indicator. Este trecut din exterior pentru a menține componenta cât mai concentrată posibil. Modul în care este prezentat un element nu este în mod clar o preocupare Indicatori.

Când adăugăm Indicatori la Carousel.vue devine clar de ce am creat două ambalaje pentru Card. HTML semantic și clar este vital, în special pentru proiectele mari cu un nivel ridicat de complexitate.

Puteți verifica codul complet la sucursală 04_Indicators.

Să adăugăm glisare

Nu în ultimul rând, facem al nostru Carusel mobil prietenos. O aplicație web progresivă bună nu începe prin stocarea în cache a fișierelor statice, ci cu receptivitate.

Deoarece ne lipsește spațiul pe ecrane mici, ascundem Butoane săgeată și permiteți utilizatorilor să gliseze pentru a naviga pe Carduri. Aici indicatorii se plătesc din nou, deoarece funcționează pe mobil ca principalul indicator pe care utilizatorii îl pot glisa pentru a vedea mai multe carduri.

Prin urmare, adăugăm următoarea bibliotecă:

yarn add vue2-touch-events

Apoi adăugăm noul v-touch atribut și o metodă de gestionare a Card. Aceasta are grijă de evenimentele emise de glisări.

Concluzie

Fantastic, am reușit! Am avut viziunea de a construi un sistem încapsulat și reutilizabil Carusel componentă și am făcut-o!

Ceea ce am putea adăuga în continuare pentru a îmbunătăți UX sunt niște animații de glisare atunci când răsfoiți cardurile.

Mulțumesc pentru lectură! Dacă îți place această postare pe blog, Urmărește-mă pe Twitter @Fa_Hinse și te rog bate din palme?