Kuidas: Lihtne karussell koos Vue-ga!

Või see, mida ma õppisin oma karusselli ehitamisel.

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

Karussellid, slaidiseanssid või ehk lihtsalt liugurid. See üldlevinud kasutajaliidese komponent on teeninud oma koha veebidisainis ja sellisena on mitmesuguseid tehnoloogiaid rakendatud.

Leiate, et Vue.js ei erine.

Aga!

Enne kui installite veel ühe sõltuvuse npm, palun teil kaaluda juba teie käsutuses olevat võimsust, kui Vue-projekt välja antakse.

Sisenema…

Üleminekugrupp

Reaktist tulijad võivad olla tuttavad üleminekurühma mõistega. Selle asemel, et olla lisandmoodul, on üleminekugrupp (parem või halvem) eelnevalt Vue-ga pakendatud ja rikaste üleminekute API on kohe pärast värsket installimist saadaval.

Neile, kes pole harjumuspärased, sarnaneb üleminekugrupp üleminekukomponendiga - mõlemad võimaldavad animeerida elementide eemaldamist, lisamist ja (üleminekugrupi puhul) elementide liikumist endas.

Sukeldume minutiga sügavamalt üleminekugruppi, kuid kõigepealt tutvustame ja austame seda, mis teeb teie enda karusselli ehitamise lihtsaks.

FLIP ja Freedom (teisest paketist)

Mis teeb karussellist? Teil on suur element (tavaliselt pilt), mis libiseb fookusest (või vaatest) sisse ja välja. Lihtsamalt öeldes on vaieldamatult kõige olulisem ühe elemendi tõrgeteta liikumine teise positsiooni. Kui nuusutate Vue-dokumentide üleminekuosa ümber, näete mõnda üsna rõvedat animatsiooni.

Dokumentide kaupa ...

See võib tunduda võlukunst, kuid kapoti all kasutab Vue lihtsat animatsioonitehnikat nimega FLIP, et teisaldada elemente vanalt positsioonilt uude asukohta teisenduste abil.

Ja see on meie pilet ühe vähem sõltuva maa juurde. Sisseehitatud FLIP-tehnika pakub meile juba leiba ja võid sellest, mis teeb karussellist karusselli!

Kohustustest loobumine!

Enne kui alustame, tahaksin rõhutada pealkirjas olevat sõna lihtsat.

Me räägime paljaste luudega-2d-karussellist. Sellise, mille kõik praegused ülemaailmse veebi kasutajad kohe tunneksid. Pole sugugi sarnane sellele siin leiduvale alglaadimiskarussellile.

Puuduvad uhked kellad ja viled ning me ei rakenda puutetundliku libisemise funktsiooni. See artikkel kirjeldab lihtsalt karusselli võimalikku alust.

Väljastpoolt seda ...

Alustamine

Asjade kiireks käivitamiseks lisame oma rad terminalide petmiskoodid AKA, kasutades ametlikult toetatud Vue tellingutööriista.

Pärast CLI installimist muutub prototüüpimine imelihtne.

Veebipaketipõhine mall on eriti kasulik kiirete prototüüpide jaoks ja sobib suurepäraselt asjade käiku saamiseks.

Kui oleme valmis ja tööle hakanud, alustame sellega App.vue

App.vue on ilus

Nii kena. Ok, kustutame selle ja alustame värskelt.

mhm

Ja muutke vastavalt rakendust app.js ...

Ja nüüd oleme uue algusena:

Pilt mitte millestki.

Ok, suurepärane.

Meie failis Carousel.vue võime väga hästi visata mõned sellised märgistused:

Ja võib-olla nüüd olete seda väga hästi teinud.

Meie võtmeisikul üleminekugrupil on sildi omadus, mis võimaldab meil seda renderdada divina (mitte vaikimisi). Samuti anname sellele klassinime ja paigutame oma slaidi selle korralikult sisse.

Kasutades slaidil direktiivi v-for, teostame reaktiivse loendi renderdamise ja anname kindlasti iga slaidi jaoks klahvi: et Vue saaks jälgida iga sõlme. Asjade lihtsuse huvides kuvatakse iga slaidi pealkiri, kasutades elementi h4 {{slide.title}}.

Pärast liha ja kartulit viskame mõned juhtnupud, et see asi kerima hakkaks.

Ja see on see märgistuse jaoks!

Me tegutseme üsna kergelt ka