Ohjeet: Yksinkertainen karuselli, jossa on vue!

Tai, mitä olen oppinut rakentamaan omaa karusellia.

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

Karusellit, diaesitykset tai ehkä vain “liukusäätimet”. Tämä kaikkialla ulottuva käyttöliittymäkomponentti on ansainnut paikkansa web-suunnittelussa ja sellaisenaan olemassa lukuisia toteutuksia eri tekniikoissa.

Huomaat, että Vue.js ei ole erilainen.

Mutta!

Ennen kuin asennat jälleenmyynnin npm, pyydän, että harkitset jo käytettävissänne olevaa voimaa, kun vue-projekti on valmis.

Tulla sisään…

Siirtymäryhmä

Reaktista tulevat voivat olla perehtyneet siirtymäryhmän käsitteeseen. Sen sijaan, että se olisi lisäosa, siirtymäryhmä (parempi tai huonompi) on valmiiksi pakattu Vueen ja rikas siirtymäsovellusliittymä on todella saatavilla heti uuden asennuksen jälkeen.

Niille, jotka ovat tuntemattomia, siirtymäryhmä on samanlainen kuin siirtymäkäärekomponentti - molemmat mahdollistavat animoinnin poistoon, lisäykseen ja (siirtymäryhmän tapauksessa) elementtien liikkeeseen itsessään.

Sukellamme hetkessä syvemmälle siirtymäryhmään, mutta ensin esitellään ja kunnioitetaan sitä, mikä tekee oman karusellin rakentamisesta helppoa.

FLIP ja Freedom (toisesta paketista)

Joten mikä tekee karusellista? Sinulla on suuri elementti (yleensä kuva), joka liukuu tarkennuksesta (tai näkymästä) sisään ja ulos. Yksinkertaisesti sanottuna, elementin saumaton siirtäminen toiseen asentoon on kiistatta tärkein osa. Jos nuhahtaa Vue-dokumenttien siirtymäosuuden ympärillä, näet joitain melko räikeitä animaatioita.

Per asiakirjat ...

Tämä saattaa tuntua maagiselta, mutta konepeiton alla Vue käyttää yksinkertaista animaatiotekniikkaa, nimeltään FLIP, siirtyäkseen elementtejä sujuvasti vanhasta sijainnista uuteen sijaintiin muunnoksilla.

Ja tämä on lipumme vähemmän riippuvaiseen maahan. Sisäänrakennettu FLIP-tekniikka tarjoaa meille jo leipää ja voita siitä, mikä tekee karusellista karusellin!

Disclamer!

Ennen kuin aloitamme, haluaisin korostaa otsikossa yksinkertaista sanaa.

Puhumme paljaista luista-2d-karusellista. Yksi, jonka kaikki nykyisen Internetin käyttäjät tunnustavat välittömästi. Ei ollenkaan eroa tästä täällä löydetystä bootstrap-karusellista.

Ei ole hienoja kelloja ja pillejä, emmekä ota käyttöön kosketussoittotoimintoa. Tässä artikkelissa kuvataan vain karusellin potentiaalinen perusta.

Sen kanssa pois tieltä ...

Päästä alkuun

Jotta asiat voitaisiin aloittaa nopeasti, me laitamme rad-terminaalihuijauskoodimme AKA virallisesti tuetulla Vue-telinetyökalulla.

Kun olet asentanut CLI: n, prototyyppien tekemisestä tulee helppoa.

Webpack-yksinkertainen malli on erityisen hyödyllinen nopeaa prototyyppiä varten ja on sellaisenaan täydellinen tapa saada asiat liikkeelle.

Kun olemme käynnissä ja aloitamme, aloitamme App.vue -sovelluksella

App.vue on kaunis

Niin kiva. Ok, poistetaan tämä ja aloitetaan uudestaan.

MHM

Ja muokata app.js vastaavasti ...

Ja nyt olemme uudessa alussa:

Kuva tyhjästä.

Okei, hienoa.

Carousel.vue-tiedostossamme voimme hyvinkin heittää joitain tällaisia ​​merkintöjä:

Ja ehkä olette nyt tehneet niin hyvin.

Avaimellamme, siirtymäryhmällä, on tunnisteominaisuus, joka antaa meille mahdollisuuden antaa se div: na (oletusvälin sijaan). Annamme sille myös luokan nimen ja asetamme siististi siististi sen sisälle.

Hyödyntämällä diojen v-for -direktiiviä, suoritamme reaktiivisen luettelon renderoinnin ja lähetämme varmasti jokaiselle dioille avaimen, jotta Vue voi seurata kutakin solmua. Jotta asiat olisivat yksinkertaisia, jokainen dio näyttää otsikonsa käyttämällä {{slide.title}} h4-elementin sisällä.

Lihan ja perunoiden jälkeen heitämme joitain säätimiä saadaksesi tämä asia vierimään.

Ja siitä on kyse merkinnästä!

Toimimme melko kevyesti myös