Scroll naar boven in Vue met herbruikbare componenten

Bij het verbeteren van de gebruikerservaring op elke website met veel inhoud op de webpagina's, is het gebruikelijk dat frontend-ontwikkelaars een scroll-naar-top-functionaliteit implementeren via een knop, om dingen leuker en handiger te maken voor gebruikers.

Hoewel gebruikers de opdracht + pijl-omhoog op een toetsenbord kunnen gebruiken, is het ook belangrijk om in gedachten te houden dat mogelijk meer dan de helft van uw gebruikers gebruiken mogelijk mobiele apparaten en gebruiken geen toetsenbord dat op hun telefoon is aangesloten tijdens het scrollen door uw website. Kleinere schermen vereisen vaak ook meer scrollen, waardoor navigeren van beneden naar boven omslachtig wordt.

In deze handleiding implementeren we stap voor stap een knop om naar boven te scrollen met behulp van Vue 3. Naast het herbruikbare onderdeel bouwen we een nieuws-app die het laatste nieuws uit verschillende bronnen biedt met de Nieuws-API.

Project Setup

Aan de slag gaan met het Vue.JS-framework is eenvoudig door een JavaScript-bestand in een HTML-bestand op te nemen. Maar voor een real-world en grootschalige toepassing, de vue-cli is de beste manier om te beginnen! We gebruiken de vue-cli in onze tutorial van vandaag.

Laten we het project maken en het een naam geven vue-scroll-to-top, met behulp van de onderstaande opdracht:

$ vue create vue-scroll-to-top

Dit creëert een sjabloon om te beginnen met het bouwen van ons project. U kunt de toepassing starten door naar het project te gaan:

$ cd vue-scroll-to-top

En serve het met Garen of NPM:

$ yarn serve

Of:

$ npm run serve

On localhost, in de haven 8080 – uw aanvraag wordt betekend:

De componenten bouwen

Nu de sjabloon is opgestart, kunnen we beginnen met het bouwen van de herbruikbare scroll-to-top-component, die wordt gegeneraliseerd naar elke app die u wilt bouwen. Laten we, voordat we de component definiëren, het bestand voorbereiden en opschonen App.vue starter die we hebben gemaakt met Vue CLI.

Het Vue-project schoonmaken

Onder src/App.vue, registreren we het toekomstige onderdeel als 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>

De gebruikersinterface van de knop bouwen

Met de pagina waarop de knop (en nieuws) wordt weergegeven, kunnen we beginnen met het bouwen van de componenten. Laten we beginnen met de knop!

In het components map, maak een AppButton.vue het dossier. In de knop voegen we een pictogram toe dat de pijltje omhoog om de functionaliteit visueel over te brengen. Voor het pictogram zelf gebruiken we een pictogrambibliotheek met de naam Font Awesome die meer dan 19.000 pictogrammen heeft over 6 stijlen en merken, hoewel dit kan worden vervangen door een eenvoudig dakje (^), een aangepast pictogram of een pictogram uit andere bibliotheken als u geen andere afhankelijkheid wilt introduceren.

Installeer met behulp van de afhankelijkheidsbeheerder van uw voorkeur het kernpakket dat alle hulpprogramma's bevat om de pictogrammen te laten werken:

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

Vervolgens installeren we de gratis solide SVG-pictogrammen (een van de vele beschikbare "sets" of stijlen), met behulp van de volgende opdracht:

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

En als laatste installeren we de Font Awesome Vue-component voor Vue 3, met behulp van de volgende opdracht:

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

Voordat we ons pictogram in onze knop kunnen weergeven, moeten we de geïnstalleerde Font Awesome-afhankelijkheden in ons project importeren, inclusief de specifieke pictogramnaam die we willen gebruiken. Laten we de 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')

We kunnen nu het pictogram pijl-omhoog noemen, as faArrowUpin AppButton.vue om het weer te geven in de gebruikersinterface! We kunnen de knop ook stylen vanuit het componentbestand:

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

Op de DOM zou onze scroll-naar-top-knop er als volgt uit moeten zien wanneer u uw applicatie opent op localhost:8080:

De gebruikersinterface voor nieuwsfeeds bouwen

Om een ​​omgeving te creëren waarin een gebruiker misschien de knop wil gebruiken in plaats van handmatig te scrollen, gaan we veel nieuwscontent ophalen van de gratis News API. Voor het doen van ophaalverzoeken maken we gebruik van de axios pakket.

Als je het nog niet hebt geïnstalleerd, kun je dit doen via Yarn of NPM:

$ yarn add axios
# Or
$ npm install axios

Om de News API te gebruiken, moet u een account – om een ​​API-sleutel te krijgen die gratis is voor ontwikkelomgevingen. Voor deze demo houden we het eenvoudig door alle artikelen over bijvoorbeeld Bitcoin op te halen. In de components map, laten we een nieuw bestand aanmaken met de naam NewsList.vue. in NewsList.vue, zullen we een lijst met Bitcoin-nieuwsartikelen samenstellen die we als reactie van de API zouden krijgen.

NewsList.vue zou nu de volgende codes moeten bevatten:

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

Dan zorgen we ervoor dat we updaten App.vue, zodat de lijst met nieuwsartikelen kan worden weergegeven:

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

Meestal wilt u de resultaten pagineren in plaats van ze op te stapelen. We creëren echter specifiek een geval waarin scrollen naar boven handig is.

Knop Scroll naar boven weergeven/verbergen met behulp van Scroll Listener

Laten we, als onderdeel van een boeiende ervaring voor de gebruiker, ervoor zorgen dat de knop om naar boven te scrollen alleen wordt weergegeven wanneer de gebruiker naar beneden begint te scrollen op de pagina.

Om dit te bereiken, moeten we luisteren naar de scroll-gebeurtenis op het moment dat een gebruiker naar beneden scrolt op de pagina.

Laten we ons eerst richten op het knopelement door er een verwijzing naar in te stellen. Dan maken we gebruik van de beforeUnmount() lifecycle-hooks om de knop toe te voegen aan en te verwijderen uit de DOM, met behulp van de scroll-luisteraar - bij het naar beneden scrollen op de pagina of naar het bovenste deel van de pagina. We kunnen ook controleren of een gebruiker bovenaan de pagina staat als window.scrollY is groter dan 0. Hiermee kunnen we de zichtbaarheid van de knop veranderen, waar nodig.

Laten we de bijwerken AppButton.vue component om de knop weer te geven of te verbergen op basis van hoe ver de gebruiker heeft gescrold:

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

Rolgebeurtenis implementeren

Wat ons op dit moment rest, is om de knop daadwerkelijk naar de bovenkant van de pagina te laten scrollen wanneer een gebruiker erop klikt. Om dit te bereiken, maken we een scrollToTop() methode in AppButton.vue. Dit is een methode die we zouden aanroepen wanneer window.scrollY = 0. Nu, wanneer de scrollToTop() methode wordt aangeroepen, scrolt onze pagina soepel naar het bovenste gedeelte en de knop scroll-top-top verdwijnt ook:

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

Wanneer dit codefragment wordt toegevoegd aan AppButton.vue, zult u merken dat we met succes een scroll-naar-top-functionaliteit hebben geïmplementeerd in onze Vue-app die we kunnen aansluiten op elk project waar we hetzelfde nodig hebben.

Conclusie

Gefeliciteerd met het volgen tot het einde! 🔥

In deze zelfstudie hebben we gekeken hoe u een scroll-naar-top-functionaliteit in een Vue-toepassing kunt inbouwen. Dit is een herbruikbare generieke component en kan ook eenvoudig in andere projecten worden ingevoerd.

Relevante bronnen