Rul til toppen i Vue med genanvendelige komponenter

For at forbedre brugeroplevelsen på ethvert websted med meget indhold på dets websider, er det almindeligt, at frontend-udviklere implementerer en scroll-to-top-funktionalitet via en knap, for at gøre tingene mere behagelige og bekvemme for brugerne.

Mens brugere kan bruge kommandoen + pil op på et tastatur, er det også vigtigt at huske på det potentielt mere end halvdelen af ​​dine brugere bruger muligvis mobile enheder og vil ikke bruge et tastatur forbundet til deres telefon, mens de ruller gennem dit websted. Mindre skærme kræver ofte også mere rulning, hvilket gør navigation fra bund til top besværlig.

I denne vejledning implementerer vi en rul-til-top-knap ved hjælp af Vue 3 – trin for trin. Ved siden af ​​den genanvendelige komponent bygger vi en nyhedsapp, der leverer seneste nyheder fra forskellige kilder med Nyheder API.

Projektopsætning

Det er enkelt at komme i gang med Vue.JS-rammeværket som at inkludere en JavaScript-fil i en HTML-fil. Men for en applikation i den virkelige verden og i stor skala vue-cli er den bedste måde at komme i gang på! Vi vil bruge vue-cli i vores tutorial i dag.

Lad os skabe projektet og navngive det vue-scroll-to-top, ved hjælp af kommandoen nedenfor:

$ vue create vue-scroll-to-top

Dette skaber en skabelon til at begynde at bygge vores projekt. Du kan starte ansøgningen ved at flytte ind i projektet:

$ cd vue-scroll-to-top

og serve det med garn eller NPM:

$ yarn serve

Eller:

$ npm run serve

On localhost, i havn 8080 – din ansøgning vil blive forkyndt:

Opbygning af komponenterne

Med skabelonen spundet op – kan vi begynde at bygge den genanvendelige scroll-to-top-komponent, som generaliserer til enhver app, du gerne vil bygge. Før vi definerer komponenten, lad os forberede og rydde op i App.vue starter, vi har oprettet med Vue CLI.

Rengøring af Vue-projektet

Under src/App.vue, registrerer vi den snart kommende komponent 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>

Opbygning af Button UI

Med siden, der viser knappen (og nyheder) – kan vi begynde at bygge komponenterne. Lad os starte med knappen!

I components mappe, skal du oprette en AppButton.vue fil. I knappen inkluderer vi et ikon, der angiver pil op for visuelt at formidle funktionaliteten. Til selve ikonet bruger vi et ikonbibliotek kaldet Font Awesome som har over 19.000 ikoner over 6 stilarter og mærker, selvom dette kan erstattes med et simpelt skilt (^), et brugerdefineret ikon eller et ikon fra andre biblioteker, hvis du ikke ønsker at introducere en anden afhængighed.

Brug din foretrukne afhængighedsmanager til at installere kernepakken, der indeholder alle hjælpeprogrammerne for at få ikonerne til at fungere:

$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core

Dernæst installerer vi gratis solide SVG-ikoner (et af de flere tilgængelige "sæt" eller stilarter), ved hjælp af følgende kommando:

$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons

Og til sidst installerer vi Font Awesome Vue-komponent til Vue 3 ved at bruge følgende kommando:

$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]

Før vi kan gengive vores ikon i vores knap, skal vi importere de installerede Font Awesome-afhængigheder til vores projekt, inklusive det specifikke ikonnavn, vi vil bruge. Lad os opdatere main.js fil:

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 nu kalde pil-op-ikonet som faArrowUpi AppButton.vue for at gengive det i brugergrænsefladen! 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 vores scroll-to-top-knap se sådan ud, når du åbner din applikation på localhost:8080:

Opbygning af nyhedsfeeds UI

For at skabe et miljø, hvor en bruger måske vil bruge knappen i stedet for manuelt at rulle – lad os hente masser af nyhedsindhold fra den gratis News API. For at foretage hentningsanmodninger vil vi drage fordel af axios pakke.

Hvis du ikke allerede har det installeret, kan du gøre det via Yarn eller NPM:

$ yarn add axios
# Or
$ npm install axios

For at bruge News API skal du registrere en konto – for at få en API-nøgle, der er gratis til udviklingsmiljøer. Til denne demo vil vi holde tingene enkle ved blot at hente alle artikler om f.eks. Bitcoin. I den components mappe, lad os oprette en ny fil kaldet NewsList.vue. I NewsList.vue, vil vi opbygge en liste over Bitcoin-nyhedsartikler, som vi ville få som et svar fra API.

NewsList.vue skal nu indeholde 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>

Så sørger vi for at opdatere App.vue, så listen over nyhedsartikler 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>

Normalt – du ønsker at paginere resultater i stedet for at få dem til at hobe sig op. Vi opretter dog specifikt et tilfælde, hvor en scroll-to-top er nyttig.

Vis/skjul Rul til topknap ved hjælp af rullelytter

Som en del af en engagerende oplevelse for brugeren, lad os sørge for, at scroll-to-top-knappen kun afsløres, når brugeren begynder at rulle ned på siden.

For at opnå dette skal vi lytte til rullebegivenheden på det tidspunkt, hvor en bruger ruller ned på siden.

Lad os først målrette knapelementet ved at sætte en ref til det. Så gør vi brug af beforeUnmount() livscykluskroge for at tilføje og fjerne knappen fra DOM ved hjælp af scroll-lytteren – når du ruller ned på siden eller til det øverste af siden. Vi kan også tjekke om en bruger er øverst på siden hvis window.scrollY er større end 0. Med dette kan vi skifte synligheden af ​​knappen, hvor det er nødvendigt.

Lad os opdatere AppButton.vue komponent til at vise eller skjule knappen baseret på, hvor langt brugeren 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 af Scroll Event

Det, der er tilbage for os på dette tidspunkt, er at få knappen til rent faktisk at rulle til toppen af ​​siden, når en bruger klikker på den. For at opnå dette, lad os oprette en scrollToTop() metode i AppButton.vue. Dette er en metode, som vi ville påberåbe når window.scrollY = 0. Nu, når scrollToTop() metode kaldes, ruller vores side jævnt til den øverste del, og rulle-top-top-knappen forsvinder også:

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};

Når dette kodestykke føjes til AppButton.vue, vil du opdage, at vi med succes har implementeret en scroll-to-top-funktionalitet i vores Vue-app, som vi kan tilslutte til ethvert projekt, hvor vi har brug for det samme.

Konklusion

Tillykke med at følge med til det sidste! 🔥

I denne tutorial så vi på, hvordan man bygger en scroll-to-top-funktionalitet ind i en Vue-applikation. Dette er en genanvendelig generisk komponent og kan også nemt introduceres i andre projekter.

Relevante ressourcer