Come fare: una giostra semplice con Vue!

Oppure, cosa ho imparato costruendo la mia giostra.

https://acollectionofatoms.github.io/vue-carousel-example/

Giostre, presentazioni o forse solo "slider". Questa onnipresente componente dell'interfaccia utente si è guadagnata il suo posto nel web design e come tale ci sono molte implementazioni in varie tecnologie.

Scoprirai che Vue.js non è diverso.

Ma!

Prima di installare npm ancora un'altra dipendenza, ti imploro di considerare la potenza già a tua disposizione dato un progetto Vue pronto all'uso.

Accedere…

Il gruppo di transizione

Coloro che provengono da React possono avere familiarità con il concetto di gruppo di transizione. Anziché essere un componente aggiuntivo, il gruppo di transizione (nel bene o nel male) è pre-impacchettato con Vue e in effetti la ricca API di transizione è immediatamente disponibile dopo una nuova installazione.

Per coloro che non hanno familiarità, un gruppo di transizione è simile a un componente del wrapper di transizione: entrambi consentono l'animazione della rimozione, aggiunta e (nel caso di un gruppo di transizione) il movimento degli elementi all'interno di se stessi.

Ci immergeremo più a fondo nel gruppo di transizione in un minuto, ma prima introduciamo e renderemo omaggio a ciò che rende FACILE la costruzione della tua giostra.

FLIP e Freedom (da un altro pacchetto)

Quindi, cosa rende una giostra? Hai un grande elemento (in genere un'immagine) che scorre dentro e fuori fuoco (o vista). In parole povere, il movimento continuo di un elemento in un'altra posizione è probabilmente la parte più importante. Se annusi la sezione di transizione dei documenti di Vue, vedrai alcune animazioni piuttosto accattivanti.

Secondo i documenti ...

Questo potrebbe sembrare magico, ma sotto il cofano, Vue sta usando una semplice tecnica di animazione chiamata FLIP per trasferire agevolmente gli elementi dalla loro vecchia posizione alla loro nuova posizione usando le trasformazioni.

E questo è il nostro biglietto per la terra con una dipendenza minore. La tecnica FLIP integrata ci fornisce già il pane e il burro di ciò che rende una giostra una giostra!

Disclamer!

Prima di iniziare, vorrei sottolineare la parola semplice nel titolo.

Stiamo parlando di bare-bones-2d-carousel. Uno che sarebbe immediatamente riconosciuto da qualsiasi utente corrente del world wide web. Per nulla dissimile da questa giostra di bootstrap trovata qui.

Non ci sono campane e fischietti fantasiosi e non stiamo implementando la funzionalità touch-slide. Questo articolo delinea solo una potenziale base per una giostra.

Con quello fuori mano ...

Iniziare

Per dare il via rapidamente alle cose, inseriremo i nostri cheat code del terminale radicale AKA usando lo strumento di ponteggio Vue ufficialmente supportato.

Dopo aver installato l'interfaccia della riga di comando, la prototipazione diventa un gioco da ragazzi.

Il modello semplice webpack è particolarmente utile per i prototipi rapidi e come tale è perfetto per iniziare.

Una volta che siamo attivi, inizieremo con App.vue

App.vue è carino

Così carino. Ok eliminiamo questo e ricominciamo da capo.

mhm

E modifica app.js di conseguenza ...

E ora siamo a un nuovo inizio:

Una foto di niente.

Ok fantastico.

Il

Nel nostro file Carousel.vue, possiamo benissimo aggiungere alcuni markup come questo:

E forse ora l'hai fatto molto bene.

Il nostro giocatore chiave, il gruppo di transizione, ha una proprietà tag che ci consente di renderlo come div (anziché come intervallo predefinito). Gli diamo anche un nome di classe e posizioniamo ordinatamente la nostra diapositiva al suo interno.

Utilizzando la direttiva v-for sulla diapositiva, realizziamo il rendering dell'elenco reattivo e siamo sicuri di passare un tasto: per ogni diapositiva in modo che Vue possa tenere traccia di ogni nodo. Mantenendo le cose semplici, ogni diapositiva mostrerà il titolo usando {{slide.title}} all'interno di un elemento h4.

Seguendo la carne e le patate, aggiungiamo alcuni controlli per far scorrere questa cosa.

E questo è tutto per il markup!

Lo

Stiamo operando abbastanza leggermente anche sul lato