Przewiń do góry w Vue z komponentami wielokrotnego użytku

Aby poprawić komfort użytkowania dowolnej witryny z dużą ilością treści na jej stronach internetowych, programiści frontendowi często wdrażają funkcję przewijania do góry za pomocą przycisku, aby uczynić ją przyjemniejszą i wygodniejszą dla użytkowników.

Chociaż użytkownicy mogą używać polecenia + strzałka w górę na klawiaturze, należy również pamiętać o tym potencjalnie ponad połowa użytkowników może używać urządzeń mobilnych i nie będzie używać klawiatury podłączonej do telefonu podczas przewijania Twojej witryny. Mniejsze ekrany często wymagają również więcej przewijania, co sprawia, że ​​nawigacja od dołu do góry jest pracochłonna.

W tym przewodniku zaimplementujemy przycisk przewijania do góry za pomocą Vue 3 – krok po kroku. Oprócz komponentu wielokrotnego użytku będziemy tworzyć aplikację z wiadomościami, która będzie dostarczać najświeższe wiadomości z różnych źródeł za pomocą Wiadomości API.

Konfiguracja projektu

Rozpoczęcie pracy z frameworkiem Vue.JS jest proste i polega na dołączeniu pliku JavaScript do pliku HTML. Ale w przypadku zastosowań w świecie rzeczywistym i na dużą skalę, vue-cli to najlepszy sposób na rozpoczęcie! użyjemy vue-cli w naszym dzisiejszym samouczku.

Stwórzmy projekt i nazwijmy go vue-scroll-to-top, używając poniższego polecenia:

$ vue create vue-scroll-to-top

Tworzy to szablon do rozpoczęcia budowy naszego projektu. Aplikację możesz uruchomić, przechodząc do projektu:

$ cd vue-scroll-to-top

oraz serve to z przędzą lub NPM:

$ yarn serve

Lub:

$ npm run serve

On localhost, w porcie 8080 – Twoja aplikacja zostanie doręczona:

Budowa komponentów

Po uruchomieniu szablonu możemy zacząć tworzyć komponent przewijania do góry wielokrotnego użytku, który można uogólnić na dowolną aplikację, którą chcesz zbudować. Przed zdefiniowaniem komponentu przygotujmy i wyczyśćmy plik App.vue starter, który stworzyliśmy za pomocą Vue CLI.

Czyszczenie projektu Vue

Pod src/App.vue, zarejestrujemy wkrótce składnik jako 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>

Budowanie interfejsu użytkownika

Ze stroną, na której wyświetli się przycisk (i aktualności) – możemy zacząć budować komponenty. Zacznijmy od przycisku!

W components folder, utwórz AppButton.vue plik. W przycisku umieścimy ikonę, która oznacza strzałka w górę aby wizualnie przekazać funkcjonalność. Dla samej ikony użyjemy biblioteki ikon o nazwie Font Fantastyczny który ma ponad 19.000 6 ikon w XNUMX stylach i markach, chociaż można to zastąpić prostym znakiem karetki (^), niestandardową ikonę lub ikonę z innych bibliotek, jeśli nie chcesz wprowadzać innej zależności.

Korzystając z preferowanego menedżera zależności, zainstaluj pakiet podstawowy, który zawiera wszystkie narzędzia umożliwiające działanie ikon:

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

Następnie zainstalujemy darmowe stałe ikony SVG (jeden z wielu dostępnych „zestawów” lub stylów), używając następującego polecenia:

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

I na koniec zainstalujemy Czcionka Awesome Vue Component dla Vue 3, używając następującego polecenia:

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

Zanim wyrenderujemy naszą ikonę w naszym przycisku, musimy zaimportować do naszego projektu zainstalowane zależności Font Awesome, w tym konkretną nazwę ikony, której chcemy użyć. Zaktualizujmy 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')

Możemy teraz wywołać ikonę strzałki w górę, ponieważ faArrowUpw AppButton.vue renderować go w interfejsie użytkownika! Możemy również stylizować przycisk z pliku komponentu:

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

Na DOM nasz przycisk przewijania do góry powinien wyglądać tak, gdy otworzysz aplikację na localhost:8080:

Tworzenie interfejsu kanałów informacyjnych

Aby stworzyć środowisko, w którym użytkownik może chcieć używać przycisku zamiast ręcznego przewijania — pobierzmy dużo treści wiadomości z bezpłatnego interfejsu News API. Do składania próśb o pobranie skorzystamy z axios pakiet.

Jeśli nie masz go jeszcze zainstalowanego, możesz to zrobić za pomocą Yarn lub NPM:

$ yarn add axios
# Or
$ npm install axios

Aby korzystać z News API, musisz się zarejestrować i konto – aby uzyskać klucz API, który jest darmowy dla środowisk deweloperskich. W tym demo utrzymamy prostotę, po prostu pobierając wszystkie artykuły o, powiedzmy, Bitcoin. w components folder, utwórzmy nowy plik o nazwie NewsList.vue, w NewsList.vue, zbudujemy listę artykułów o Bitcoinie, które otrzymamy jako odpowiedź z API.

NewsList.vue powinien teraz zawierać następujące kody:

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

Następnie upewniamy się, że aktualizujemy App.vue, aby wyświetlić listę artykułów z wiadomościami:

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

Zwykle – chciałbyś podzielić wyniki na strony, zamiast je gromadzić. Jednak specjalnie tworzymy przypadek, w którym przydatne jest przewijanie do góry.

Pokaż/ukryj przycisk przewijania do góry za pomocą nasłuchiwania przewijania

W ramach angażowania użytkownika upewnijmy się, że przycisk przewijania do góry jest widoczny tylko wtedy, gdy użytkownik zaczyna przewijać stronę w dół.

Aby to osiągnąć, musimy nasłuchiwać zdarzenia scroll w punkcie, w którym użytkownik przewija stronę w dół.

Najpierw wycelujmy w element przycisku, ustawiając do niego referencję. Następnie korzystamy z tzw beforeUnmount() haki cyklu życia do dodawania i usuwania przycisku z DOM, z pomocą detektora przewijania – podczas przewijania strony w dół lub na górę strony. Możemy również sprawdzić, czy użytkownik znajduje się na górze strony, jeśli window.scrollY jest większe od 0. Dzięki temu możemy przełączać widoczność przycisku tam, gdzie jest to konieczne.

Zaktualizujmy AppButton.vue komponent do wyświetlania lub ukrywania przycisku na podstawie tego, jak daleko przewinął się użytkownik:

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

Implementowanie zdarzenia przewijania

To, co nam pozostało w tym momencie, to sprawienie, by przycisk faktycznie przewijał się na górę strony, gdy użytkownik go kliknie. Aby to osiągnąć, stwórzmy scrollToTop() metoda w AppButton.vue. Jest to metoda, którą wywołalibyśmy, kiedy window.scrollY = 0. Teraz, kiedy scrollToTop() wywołana zostanie metoda, nasza strona płynnie przewinie się do najwyższej części, a przycisk przewijania z góry na górę również zniknie:

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

Po dodaniu tego fragmentu kodu do AppButton.vue, przekonasz się, że pomyślnie wdrożyliśmy funkcję przewijania do góry w naszej aplikacji Vue, którą możemy podłączyć do dowolnego projektu, w którym potrzebujemy tego samego.

Wnioski

Gratulujemy wytrwałości do samego końca! 🔥

W tym samouczku przyjrzeliśmy się, jak zbudować funkcję przewijania do góry w aplikacji Vue. Jest to ogólny komponent wielokrotnego użytku, który można łatwo wprowadzić również w innych projektach.

Odpowiednie zasoby