Scrollen Sie in Vue mit wiederverwendbaren Komponenten nach oben

Bei der Verbesserung der Benutzererfahrung auf jeder Website mit vielen Inhalten auf ihren Webseiten ist es üblich, dass Frontend-Entwickler eine Scroll-to-Top-Funktion über eine Schaltfläche implementieren, um die Dinge für die Benutzer angenehmer und bequemer zu machen.

Während Benutzer den Befehl + Pfeil nach oben auf einer Tastatur verwenden können, ist es auch wichtig, dies möglicherweise zu berücksichtigen mehr als die Hälfte Ihrer Benutzer verwenden möglicherweise Mobilgeräte und verwenden beim Scrollen durch Ihre Website keine an ihr Telefon angeschlossene Tastatur. Kleinere Bildschirme erfordern oft auch mehr Scrollen, was die Navigation von unten nach oben mühsam macht.

In dieser Anleitung implementieren wir einen Scroll-to-Top-Button mit Vue 3 – Schritt für Schritt. Neben der wiederverwendbaren Komponente werden wir eine Nachrichten-App bauen, die aktuelle Nachrichten aus verschiedenen Quellen mit dem bereitstellt Nachrichten-API.

Projektaufbau

Der Einstieg in das Vue.JS-Framework ist einfach, da Sie eine JavaScript-Datei in eine HTML-Datei einfügen. Aber für eine reale und groß angelegte Anwendung ist die vue-cli ist der beste Einstieg! Wir verwenden die vue-cli in unserem heutigen Tutorial.

Lassen Sie uns das Projekt erstellen und benennen vue-scroll-to-top, mit dem folgenden Befehl:

$ vue create vue-scroll-to-top

Dadurch wird eine Vorlage erstellt, um mit dem Erstellen unseres Projekts zu beginnen. Sie können die Anwendung starten, indem Sie in das Projekt wechseln:

$ cd vue-scroll-to-top

Und serve es mit Garn oder NPM:

$ yarn serve

Oder:

$ npm run serve

On localhost, im Hafen 8080 – Ihr Antrag wird zugestellt:

Aufbau der Komponenten

Mit der erstellten Vorlage können wir mit dem Erstellen der wiederverwendbaren Scroll-to-Top-Komponente beginnen, die sich auf jede App verallgemeinern lässt, die Sie erstellen möchten. Bevor wir die Komponente definieren, bereiten wir sie vor und bereinigen sie App.vue Starter, den wir mit Vue CLI erstellt haben.

Bereinigen des Vue-Projekts

Der src/App.vue, registrieren wir die baldige Komponente 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>

Erstellen der Schaltflächen-Benutzeroberfläche

Mit der Seite, auf der die Schaltfläche (und die Neuigkeiten) angezeigt werden, können wir mit dem Erstellen der Komponenten beginnen. Beginnen wir mit dem Knopf!

Im components Ordner, erstellen Sie eine AppButton.vue Datei. In die Schaltfläche fügen wir ein Symbol ein, das die anzeigt Aufwärtspfeil um die Funktionalität visuell zu vermitteln. Für das Symbol selbst verwenden wir eine Symbolbibliothek namens Font Ehrfürchtig Das hat über 19.000 Symbole über 6 Stile und Marken, obwohl dies durch ein einfaches Caret-Zeichen ersetzt werden kann (^), ein benutzerdefiniertes Symbol oder ein Symbol aus anderen Bibliotheken, wenn Sie keine weitere Abhängigkeit einführen möchten.

Installieren Sie mit Ihrem bevorzugten Abhängigkeitsmanager das Kernpaket, das alle Dienstprogramme enthält, damit die Symbole funktionieren:

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

Als nächstes installieren wir die kostenlose solide SVG-Icons (eines der vielen verfügbaren „Sets“ oder Stile) mit dem folgenden Befehl:

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

Und zum Schluss installieren wir die Font Awesome Vue-Komponente für Vue 3 mit dem folgenden Befehl:

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

Bevor wir unser Symbol in unserer Schaltfläche rendern können, müssen wir die installierten Font Awesome-Abhängigkeiten in unser Projekt importieren, einschließlich des spezifischen Symbolnamens, den wir verwenden möchten. Lassen Sie uns die aktualisieren main.js Datei:

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

Wir können jetzt das Pfeil-nach-oben-Symbol als bezeichnen faArrowUpin AppButton.vue um es in der Benutzeroberfläche zu rendern! Wir können die Schaltfläche auch aus der Komponentendatei gestalten:

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

Auf dem DOM sollte unsere Scroll-to-Top-Schaltfläche so aussehen, wenn Sie Ihre Anwendung öffnen localhost:8080:

Erstellen der Newsfeeds-Benutzeroberfläche

Um eine Umgebung zu schaffen, in der ein Benutzer möglicherweise die Schaltfläche verwenden möchte, anstatt manuell zu scrollen, lassen Sie uns viele Nachrichteninhalte aus der kostenlosen Nachrichten-API abrufen. Für Abrufanfragen nutzen wir die axios Paket.

Wenn Sie es noch nicht installiert haben, können Sie dies über Yarn oder NPM tun:

$ yarn add axios
# Or
$ npm install axios

Um die News-API zu verwenden, müssen Sie sich registrieren Konto – um einen API-Schlüssel zu erhalten, der für Entwicklungsumgebungen kostenlos ist. Für diese Demo werden wir die Dinge einfach halten, indem wir einfach alle Artikel über, sagen wir, Bitcoin abrufen. In dem components Ordner, erstellen wir eine neue Datei mit dem Namen NewsList.vue. in NewsList.vue, werden wir eine Liste von Bitcoin-Nachrichtenartikeln erstellen, die wir als Antwort von der API erhalten würden.

NewsList.vue sollte jetzt die folgenden Codes enthalten:

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

Dann stellen wir sicher, dass wir aktualisieren App.vue, damit die Liste der Nachrichtenartikel angezeigt werden kann:

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

Normalerweise möchten Sie die Ergebnisse paginieren, anstatt sie zu stapeln. Wir erstellen jedoch speziell einen Fall, in dem ein Scrollen nach oben nützlich ist.

Scroll-to-Top-Button mit Scroll-Listener ein-/ausblenden

Als Teil einer ansprechenden Erfahrung für den Benutzer sollten wir sicherstellen, dass die Schaltfläche „Nach oben scrollen“ nur angezeigt wird, wenn der Benutzer beginnt, die Seite nach unten zu scrollen.

Um dies zu erreichen, müssen wir das Scroll-Ereignis an der Stelle abhören, an der ein Benutzer die Seite nach unten scrollt.

Lassen Sie uns zunächst das Schaltflächenelement anvisieren, indem wir eine Referenz darauf setzen. Dann nutzen wir die beforeUnmount() Lebenszyklus-Hooks zum Hinzufügen und Entfernen der Schaltfläche aus dem DOM mit Hilfe des Scroll-Listeners – beim Scrollen der Seite nach unten oder zum Seitenanfang. Wir können auch überprüfen, ob sich ein Benutzer oben auf der Seite befindet, wenn window.scrollY größer als 0 ist. Damit können wir die Sichtbarkeit der Schaltfläche bei Bedarf umschalten.

Lassen Sie uns die aktualisieren AppButton.vue Komponente, um die Schaltfläche anzuzeigen oder auszublenden, je nachdem, wie weit der Benutzer gescrollt hat:

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

Scroll-Ereignis implementieren

Was uns an dieser Stelle übrig bleibt, ist, die Schaltfläche tatsächlich zum Anfang der Seite scrollen zu lassen, wenn ein Benutzer darauf klickt. Um dies zu erreichen, erstellen wir eine scrollToTop() Methode in AppButton.vue. Dies ist eine Methode, die wir wann aufrufen würden window.scrollY = 0. Jetzt, wenn die scrollToTop() -Methode aufgerufen wird, scrollt unsere Seite reibungslos zum obersten Teil und die Scroll-Top-Top-Schaltfläche verschwindet ebenfalls:

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

Wenn dieses Code-Snippet hinzugefügt wird AppButton.vue, werden Sie feststellen, dass wir in unserer Vue-App erfolgreich eine Scroll-to-Top-Funktion implementiert haben, die wir in jedes Projekt einbauen können, in dem wir dasselbe benötigen.

Zusammenfassung

Herzlichen Glückwunsch, dass Sie bis zum Ende mitgemacht haben! 🔥

In diesem Tutorial haben wir uns angesehen, wie man eine Scroll-to-Top-Funktion in eine Vue-Anwendung einbaut. Dies ist eine wiederverwendbare generische Komponente und kann problemlos auch in anderen Projekten eingeführt werden.

Relevante Ressourcen