For å forbedre brukeropplevelsen på ethvert nettsted med mye innhold på nettsidene, er det vanlig at frontend-utviklere implementerer en scroll-to-top-funksjonalitet via en knapp, for å gjøre ting mer behagelig og praktisk for brukerne.
Mens brukere kan bruke kommandoen + pil opp på et tastatur, er det også viktig å huske på det potensielt mer enn halvparten av brukerne dine kan bruke mobile enheter og vil ikke bruke et tastatur koblet til telefonen mens de ruller gjennom nettstedet ditt. Mindre skjermer krever ofte også mer rulling, noe som gjør navigering fra bunn til topp arbeidskrevende.
I denne veiledningen implementerer vi en scroll-to-top-knapp ved hjelp av Vue 3 – trinn for trinn. Ved siden av den gjenbrukbare komponenten vil vi bygge en nyhetsapp som gir siste nytt fra ulike kilder med Nyheter API.
Kildekode: Som vanlig kan du tukle med kildekoden som er vert på GitHub.
Prosjektoppsett
Å komme i gang med Vue.JS-rammeverket er enkelt som å inkludere en JavaScript-fil i en HTML-fil. Men for en reell og storskala applikasjon vue-cli er den beste måten å komme i gang på! Vi vil bruke vue-cli i opplæringen vår i dag.
La oss lage prosjektet og gi det et navn vue-scroll-to-top, ved å bruke kommandoen nedenfor:
$ vue create vue-scroll-to-top
Dette skaper en mal for å begynne å bygge prosjektet vårt. Du kan starte søknaden ved å gå inn i prosjektet:
$ cd vue-scroll-to-top
Og serve det med garn eller NPM:
$ yarn serve
Eller:
$ npm run serve
On localhost, ved havn 8080 – søknaden din vil bli servert:
Bygge komponentene
Med malen spunnet opp – kan vi begynne å bygge den gjenbrukbare scroll-to-top-komponenten, som generaliserer til enhver app du ønsker å bygge. Før vi definerer komponenten, la oss forberede og rydde opp i App.vue starter vi har laget med Vue CLI.
Rengjøring av Vue-prosjektet
Under src/App.vue, vil vi registrere den snart-å-være-komponenten som 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>
Bygge Button UI
Med siden som viser knappen (og nyheter) – kan vi begynne å bygge komponentene. La oss starte med knappen!
på components mappe, opprette en AppButton.vue fil. I knappen inkluderer vi et ikon som betyr pil opp å visuelt formidle funksjonaliteten. For selve ikonet bruker vi et ikonbibliotek kalt Font Awesome som har over 19.000 ikoner over 6 stiler og merker, men dette kan erstattes med et enkelt skilt (^), et tilpasset ikon eller et ikon fra andre biblioteker hvis du ikke vil introdusere en annen avhengighet.
Bruk din foretrukne avhengighetsbehandling, installer kjernepakken som inneholder alle verktøyene for å få ikonene til å fungere:
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
Deretter installerer vi gratis solide SVG-ikoner (ett av de flere tilgjengelige "settene" eller stilene), ved å bruke følgende kommando:
Sjekk ut vår praktiske, praktiske guide for å lære Git, med beste praksis, bransjeaksepterte standarder og inkludert jukseark. Slutt å google Git-kommandoer og faktisk lære den!
$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons
Og til slutt vil vi installere Font Awesome Vue-komponent for Vue 3, ved å bruke følgende kommando:
$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]
Før vi kan gjengi ikonet vårt i knappen vår, må vi importere de installerte Font Awesome-avhengighetene til prosjektet vårt, inkludert det spesifikke ikonnavnet vi vil bruke. La oss oppdatere main.js file:
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')
Vi kan nå kalle pil-opp-ikonet, som faArrowUpi AppButton.vue for å gjengi det i brukergrensesnittet! Vi kan også style knappen fra komponentfilen:
<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>
På DOM skal rulle-to-top-knappen vår se slik ut når du åpner applikasjonen din på localhost:8080:
Bygge brukergrensesnittet for nyhetsfeeds
For å lage et miljø der en bruker kanskje vil bruke knappen, i stedet for å rulle manuelt – la oss hente mye nyhetsinnhold fra den gratis News API. For hentingsforespørsler vil vi dra nytte av axios pakke.
Hvis du ikke allerede har det installert, kan du gjøre det via Yarn eller NPM:
$ yarn add axios
# Or
$ npm install axios
For å bruke News API, må du registrere en konto – for å få en API-nøkkel som er gratis for utviklingsmiljøer. For denne demoen vil vi holde ting enkelt ved å bare hente alle artikler om for eksempel Bitcoin. I components mappen, la oss lage en ny fil kalt NewsList.vue. i NewsList.vue, vil vi bygge ut en liste over Bitcoin-nyhetsartikler som vi vil få som et svar fra API.
NewsList.vue skal nå inkludere følgende koder:
<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>
Da sørger vi for å oppdatere App.vue, slik at listen over nyhetsartikler kan vises:
<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>
Vanligvis – du ønsker å paginere resultater, i stedet for at de hoper seg opp. Vi lager imidlertid spesifikt et tilfelle der en rull-til-toppen er nyttig.
Vis/skjul Scroll til topp-knappen ved å bruke Scroll Listener
Som en del av en engasjerende opplevelse for brukeren, la oss sørge for at scroll-to-top-knappen bare vises når brukeren begynner å rulle nedover siden.
For å oppnå dette, må vi lytte til rullehendelsen på det tidspunktet en bruker ruller nedover siden.
Først, la oss målrette knappeelementet ved å sette en ref til det. Deretter benytter vi oss av beforeUnmount() livssykluskroker for å legge til og fjerne knappen fra DOM, ved hjelp av rullelytteren – når du ruller nedover siden eller til øverst på siden. Vi kan også sjekke om en bruker er øverst på siden hvis window.scrollY er større enn 0. Med dette kan vi bytte synligheten til knappen der det er nødvendig.
La oss oppdatere AppButton.vue komponent for å vise eller skjule knappen basert på hvor langt brukeren har rullet:
<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>
Implementering av Scroll Event
Det som gjenstår for oss på dette tidspunktet er å få knappen til å rulle til toppen av siden når en bruker klikker på den. For å oppnå dette, la oss lage en scrollToTop() metode i AppButton.vue. Dette er en metode som vi vil påberope oss når window.scrollY = 0. Nå, når scrollToTop() metoden kalles, ruller siden vår jevnt til den øverste delen, og scroll-top-top-knappen forsvinner også:
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
Når denne kodebiten legges til AppButton.vue, vil du oppdage at vi har implementert en rulle-til-topp-funksjonalitet i Vue-appen vår som vi kan koble til ethvert prosjekt der vi trenger det samme.
konklusjonen
Gratulerer med å følge med til siste slutt! 🔥
I denne opplæringen så vi på hvordan du bygger en scroll-to-top-funksjonalitet i en Vue-applikasjon. Dette er en gjenbrukbar generisk komponent og kan lett introduseres i andre prosjekter også.
