Scrolla till toppen i Vue med återanvändbara komponenter

För att förbättra användarupplevelsen på vilken webbplats som helst med mycket innehåll på sina webbsidor, är det vanligt att frontendutvecklare implementerar en scroll-to-top-funktionalitet via en knapp för att göra saker roligare och bekvämare för användarna.

Medan användare kan använda kommandot + uppåtpil på ett tangentbord, är det också viktigt att tänka på det potentiellt mer än hälften av dina användare kanske använder mobila enheter och kommer inte att använda ett tangentbord anslutet till sin telefon när de rullar igenom din webbplats. Mindre skärmar kräver ofta också mer rullning, vilket gör navigering från botten till toppen mödosam.

I den här guiden implementerar vi en scroll-to-top-knapp med Vue 3 – steg för steg. Vid sidan av den återanvändbara komponenten kommer vi att bygga en nyhetsapp som ger senaste nytt från olika källor med Nyheter API.

Projektinställning

Att komma igång med Vue.JS-ramverket är enkelt som att inkludera en JavaScript-fil i en HTML-fil. Men för en verklig och storskalig tillämpning vue-cli är det bästa sättet att komma igång! Vi kommer att använda vue-cli i vår tutorial idag.

Låt oss skapa projektet och namnge det vue-scroll-to-top, med kommandot nedan:

$ vue create vue-scroll-to-top

Detta skapar en mall för att börja bygga vårt projekt. Du kan starta ansökan genom att flytta in i projektet:

$ cd vue-scroll-to-top

Och serve det med garn eller NPM:

$ yarn serve

eller:

$ npm run serve

On localhost, i hamnen 8080 – din ansökan kommer att delges:

Bygga komponenterna

Med mallen spunnen upp – vi kan börja bygga den återanvändbara scroll-to-top-komponenten, som generaliserar till vilken app du vill bygga. Innan vi definierar komponenten, låt oss förbereda och rensa upp App.vue starter vi har skapat med Vue CLI.

Rengöring av Vue-projektet

Enligt src/App.vue, kommer vi att registrera den snart kommande 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>

Bygger knappgränssnittet

Med sidan som visar knappen (och nyheter) – kan vi börja bygga komponenterna. Låt oss börja med knappen!

I components mapp, skapa en AppButton.vue fil. I knappen kommer vi att inkludera en ikon som betecknar uppåtpil för att visuellt förmedla funktionaliteten. För själva ikonen använder vi ett ikonbibliotek som heter Font Toppen som har över 19.000 6 ikoner över XNUMX stilar och varumärken, även om detta kan ersättas med en enkel skylt (^), en anpassad ikon eller en ikon från andra bibliotek om du inte vill införa ett annat beroende.

Använd din föredragna beroendehanterare och installera kärnpaketet som innehåller alla verktyg för att få ikonerna att fungera:

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

Därefter installerar vi gratis solida SVG-ikoner (en av flera tillgängliga "uppsättningar" eller stilar), med följande kommando:

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

Och slutligen kommer vi att installera Font Awesome Vue-komponent för Vue 3, med följande kommando:

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

Innan vi kan återge vår ikon i vår knapp måste vi importera de installerade Font Awesome-beroendena till vårt projekt, inklusive det specifika ikonnamnet vi vill använda. Låt oss uppdatera 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 kalla pil-upp-ikonen som faArrowUpi AppButton.vue för att återge det i UI! Vi kan också styla knappen från 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 bör vår scroll-to-top-knapp se ut så här när du öppnar din applikation på localhost:8080:

Bygga gränssnittet för nyhetsflöden

För att skapa en miljö där en användare kanske vill använda knappen, istället för att rulla manuellt – låt oss hämta massor av nyhetsinnehåll från det kostnadsfria News API. För att göra hämtningsförfrågningar kommer vi att dra fördel av axios paket.

Om du inte redan har det installerat kan du göra det via Yarn eller NPM:

$ yarn add axios
# Or
$ npm install axios

För att använda News API måste du registrera en konto – för att få en API-nyckel som är gratis för utvecklingsmiljöer. För den här demon kommer vi att hålla det enkelt genom att bara hämta alla artiklar om till exempel Bitcoin. I den components mapp, låt oss skapa en ny fil som heter NewsList.vue. I NewsList.vue, kommer vi att bygga ut en lista över Bitcoin-nyhetsartiklar som vi skulle få som ett svar från API.

NewsList.vue bör nu inkludera följande 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>

Sedan ser vi till att uppdatera App.vue, så att listan med nyhetsartiklar kan visas:

<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>

Vanligtvis – du vill paginera resultat istället för att de hopar sig. Men vi skapar specifikt ett fall där en scroll-to-top är användbar.

Visa/Dölj Scroll to Top-knappen med Scroll Listener

Som en del av en engagerande upplevelse för användaren, låt oss se till att scroll-to-top-knappen endast visas när användaren börjar scrolla ner på sidan.

För att uppnå detta måste vi lyssna på rullningshändelsen när en användare rullar ner på sidan.

Låt oss först rikta in oss på knappelementet genom att sätta en ref till det. Sedan använder vi oss av beforeUnmount() livscykelhakar för att lägga till och ta bort knappen från DOM, med hjälp av rullningslyssnaren – när du rullar ner på sidan eller längst upp på sidan. Vi kan också kontrollera om en användare är högst upp på sidan om window.scrollY är större än 0. Med detta kan vi växla synligheten för knappen där det behövs.

Låt oss uppdatera AppButton.vue komponent för att visa eller dölja knappen baserat på hur långt användaren har rullat:

<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>

Implementera Scroll Event

Vad som återstår för oss nu är att få knappen att rulla till toppen av sidan när en användare klickar på den. För att uppnå detta, låt oss skapa en scrollToTop() metod i AppButton.vue. Detta är en metod som vi skulle åberopa när window.scrollY = 0. Nu, när scrollToTop() metoden anropas, vår sida rullar smidigt till den översta delen, och knappen rulla uppåt försvinner också:

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

När detta kodavsnitt läggs till AppButton.vue, kommer du att upptäcka att vi framgångsrikt har implementerat en scroll-to-top-funktion i vår Vue-app som vi kan koppla in i alla projekt där vi behöver detsamma.

Slutsats

Grattis till att du följt med till slutet! 🔥

I den här handledningen tittade vi på hur man bygger en scroll-to-top-funktionalitet i en Vue-applikation. Detta är en återanvändbar generisk komponent och kan enkelt introduceras i andra projekt också.

Relevanta resurser