În îmbunătățirea experienței utilizatorului pe orice site web cu mult conținut pe paginile sale web, este obișnuit ca dezvoltatorii de front-end să implementeze o funcționalitate de defilare în sus prin intermediul unui buton, pentru a face lucrurile mai plăcute și mai convenabile pentru utilizatori.
În timp ce utilizatorii pot folosi comanda + săgeata sus de pe o tastatură, este, de asemenea, important să țineți cont de faptul că potențial mai mult de jumătate dintre utilizatorii dvs ar putea folosi dispozitive mobile și nu va folosi o tastatură conectată la telefonul lor în timp ce navighează prin site-ul dvs. web. Ecranele mai mici necesită adesea, de asemenea, o derulare mai mare, făcând navigarea de jos în sus laborioasă.
În acest ghid, vom implementa un buton de derulare în sus folosind Vue 3 – pas cu pas. Pe lângă componenta reutilizabilă, vom construi o aplicație de știri care oferă știri de ultimă oră din diverse surse cu News API.
Cod sursa: Ca de obicei, puteți modifica codul sursă găzduit pe GitHub.
Configurare proiect
Începerea cu framework-ul Vue.JS este simplă ca includerea unui fișier JavaScript într-un fișier HTML. Dar pentru o aplicație reală și pe scară largă, vue-cli este cel mai bun mod de a începe! Vom folosi vue-cli în tutorialul nostru de astăzi.
Să creăm proiectul și să-i denumim vue-scroll-to-top, folosind comanda de mai jos:
$ vue create vue-scroll-to-top
Acest lucru creează un șablon pentru a începe construirea proiectului nostru. Puteți începe aplicația trecând în proiect:
$ cd vue-scroll-to-top
Și serve cu fire sau NPM:
$ yarn serve
Sau:
$ npm run serve
On localhost, în port 8080 – cererea dumneavoastră va fi comunicată:
Construirea Componentelor
Odată cu șablonul rotit – putem începe să construim componenta reutilizabilă de defilare în sus, care se generalizează la orice aplicație pe care doriți să o construiți. Înainte de a defini componenta, să pregătim și să curățăm App.vue starter pe care l-am creat cu Vue CLI.
Curățarea proiectului Vue
În src/App.vue, vom înregistra componenta care va fi în curând ca AppButton:
<template>
<section class="app-container">
<AppButton />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
export default {
name: "App",
components: {
AppButton
},
setup() {
return {};
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
Crearea interfeței de utilizare pentru buton
Cu pagina care va afișa butonul (și știrile) – putem începe construirea componentelor. Să începem cu butonul!
În components folder, creați un AppButton.vue fişier. În buton, vom include o pictogramă care semnifică Săgeata în sus pentru a transmite vizual funcționalitatea. Pentru pictograma în sine, vom folosi o bibliotecă de pictograme numită Font Awesome care are peste 19.000 de pictograme peste 6 stiluri și mărci, deși aceasta poate fi înlocuită cu un simplu semn caret (^), o pictogramă personalizată sau o pictogramă din alte biblioteci dacă nu doriți să introduceți o altă dependență.
Folosind managerul de dependențe preferat, instalați pachetul de bază care conține toate utilitățile pentru a face pictogramele să funcționeze:
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
În continuare, vom instala pictograme SVG solide gratuite (unul dintre multiplele „seturi” sau stiluri disponibile), folosind următoarea comandă:
Consultați ghidul nostru practic și practic pentru a învăța Git, cu cele mai bune practici, standarde acceptate de industrie și fisa de cheat incluse. Opriți căutarea pe Google a comenzilor Git și de fapt învăţa aceasta!
$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons
Și, în sfârșit, vom instala Font Awesome Vue Component pentru Vue 3, folosind următoarea comandă:
$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]
Înainte de a ne reda pictograma în butonul nostru, trebuie să importam dependențele instalate Font Awesome în proiectul nostru, inclusiv numele pictogramei pe care vrem să îl folosim. Să actualizăm main.js fișier:
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowUp)
createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
Acum putem apela pictograma săgeată în sus, ca faArrowUp, În AppButton.vue pentru a-l reda în UI! De asemenea, putem stila butonul din fișierul component:
<template>
<button class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
right: 40px;
bottom: 40px;
}
</style>
Pe DOM, butonul nostru de derulare în sus ar trebui să arate astfel, atunci când deschideți aplicația localhost:8080:
Crearea interfeței de utilizare a fluxurilor de știri
Pentru a crea un mediu în care un utilizator ar putea dori să folosească butonul, în loc să deruleze manual – haideți să aducem o mulțime de conținut de știri din API-ul gratuit Știri. Pentru a face cereri de preluare, vom profita de axios pachet.
Dacă nu îl aveți deja instalat, puteți face acest lucru prin Yarn sau NPM:
$ yarn add axios
# Or
$ npm install axios
Pentru a utiliza API-ul Știri, va trebui să înregistrați un cont – pentru a obține o cheie API care este gratuită pentru mediile de dezvoltare. Pentru această demonstrație, vom păstra lucrurile simple, preluând doar toate articolele despre, de exemplu, Bitcoin. În components folder, să creăm un fișier nou numit NewsList.vue. În NewsList.vue, vom construi o listă de articole de știri Bitcoin pe care le-am primi ca răspuns de la API.
NewsList.vue ar trebui să includă acum următoarele coduri:
<template>
<section>
<ul class="news-list">
<li class="news-card" v-for="newsItem in newsList" :key="newsItem.id">
<p><span class="heading">Title</span>: {{ newsItem.title }}</p>
<p><span class="heading">Author</span>: {{ newsItem.author }}</p>
<p>
<span class="heading">Description</span>: {{ newsItem.description }}
</p>
<p><span class="heading">Source</span>: {{ newsItem.source.name }}</p>
</li>
</ul>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, ref } from "vue";
export default {
name: "NewsList",
setup() {
const newsList = ref([]);
const fetchNews = () => {
axios
.get(
"https://newsapi.org/v2/everything?q=bitcoin&apiKey=94585b39692e4ea6b372bea15abf7dcc"
)
.then((response) => (newsList.value = response.data.articles));
};
onMounted(() => {
fetchNews();
});
return { newsList };
},
};
</script>
<style scoped>
ul.news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
ul li.news-card {
padding: 10px;
display: flex;
border-radius: 8px;
flex-direction: column;
row-gap: 5px;
box-shadow: 0px 4px 12px -1px rgba(120,116,120,0.79);
}
li p span.heading {
font-weight: 600;
font-size: 18;
}
</style>
Apoi, ne asigurăm că actualizăm App.vue, astfel încât să poată fi afișată lista articolelor de știri:
<template>
<section class="app-container">
<AppButton />
<NewsList />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
import NewsList from "./components/NewsList.vue";
export default {
name: "App",
components: {
AppButton,
NewsList,
},
setup() {
return{}
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
De obicei – ai dori să paginați rezultatele, în loc să le adunați. Cu toate acestea, creăm în mod specific un caz în care un derulare în sus este util.
Afișați/Ascundeți butonul de derulare la partea de sus utilizând Scroll Listener
Ca parte a unei experiențe captivante pentru utilizator, să ne asigurăm că butonul de derulare în sus este dezvăluit numai atunci când utilizatorul începe să deruleze în jos pe pagină.
Pentru a realiza acest lucru, trebuie să ascultăm evenimentul de defilare în momentul în care un utilizator derulează în jos pe pagină.
Mai întâi, să țintim elementul butonului setând o referință la acesta. Apoi, folosim beforeUnmount() cârlige ciclului de viață pentru a adăuga și elimina butonul din DOM, cu ajutorul ascultătorului de defilare - la derularea în jos a paginii sau în partea de sus a paginii. De asemenea, putem verifica dacă un utilizator este în partea de sus a paginii dacă window.scrollY este mai mare decât 0. Cu aceasta, putem comuta vizibilitatea butonului, acolo unde este necesar.
Să actualizăm AppButton.vue componentă pentru a afișa sau ascunde butonul în funcție de cât de departe a derulat utilizatorul:
<template>
<button ref="appButton" class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<script>
import { onMounted, ref, onBeforeMount } from "vue";
export default {
name: "AppButton",
setup() {
const appButton = ref();
const userScroll = () => {
if (window.scrollY > 0) {
appButton.value.classList.add("showButton");
console.log('scrolled');
} else {
appButton.value.classList.remove("showButton");
console.log('top');
}
};
onMounted(() => {
window.addEventListener("scroll", userScroll);
});
onBeforeMount(() => {
window.removeEventListener("scroll", userScroll);
});
return { appButton };
},
};
</script>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
bottom: 40px;
display: none;
right: 40px;
}
.showButton {
display: block;
}
</style>
Implementarea evenimentului de defilare
Ceea ce ne rămâne în acest moment este să facem ca butonul să deruleze efectiv în partea de sus a paginii atunci când un utilizator dă clic pe el. Pentru a realiza acest lucru, să creăm un scrollToTop() metoda în AppButton.vue. Aceasta este o metodă pe care am invoca-o când window.scrollY = 0. Acum, când scrollToTop() este apelată metoda, pagina noastră derulează fără probleme până la partea de sus, iar butonul de defilare-sus-sus dispare și el:
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
Când acest fragment de cod este adăugat la AppButton.vue, veți descoperi că am implementat cu succes o funcționalitate de defilare în sus în aplicația noastră Vue, pe care o putem conecta la orice proiect în care avem nevoie de același lucru.
Concluzie
Felicitări pentru că ai urmat până la sfârșit! 🔥
În acest tutorial, ne-am uitat la cum să construim o funcționalitate de defilare în sus într-o aplicație Vue. Aceasta este o componentă generică reutilizabilă și poate fi introdusă cu ușurință și în alte proiecte.
