Scorri verso l'alto in Vue con componenti riutilizzabili

Nel migliorare l'esperienza dell'utente su qualsiasi sito Web con molti contenuti nelle proprie pagine Web, è normale che gli sviluppatori frontend implementino una funzionalità di scorrimento verso l'alto tramite un pulsante, per rendere le cose più divertenti e convenienti per gli utenti.

Sebbene gli utenti possano utilizzare il comando + freccia su su una tastiera, è anche importante tenerlo presente potenzialmente più della metà dei tuoi utenti potrebbero utilizzare dispositivi mobili e non utilizzare una tastiera collegata al telefono durante lo scorrimento del tuo sito web. Gli schermi più piccoli spesso richiedono anche uno scorrimento maggiore, rendendo laboriosa la navigazione dal basso verso l'alto.

In questa guida implementeremo un pulsante di scorrimento verso l'alto utilizzando Vue 3, passo dopo passo. Oltre al componente riutilizzabile, creeremo un'app di notizie che fornirà le ultime notizie da varie fonti con il API di notizie.

Impostazione del progetto

Iniziare con il framework Vue.JS è semplice come includere un file JavaScript in un file HTML. Ma per un'applicazione reale e su larga scala, il vue-cli è il modo migliore per iniziare! Utilizzeremo il vue-cli nel nostro tutorial di oggi.

Creiamo il progetto e gli diamo un nome vue-scroll-to-top, utilizzando il comando seguente:

$ vue create vue-scroll-to-top

Questo crea un modello per iniziare a costruire il nostro progetto. È possibile avviare l'applicazione spostandosi nel progetto:

$ cd vue-scroll-to-top

E altre ancora… serve con Yarn o NPM:

$ yarn serve

Oppure:

$ npm run serve

On localhost, al porto 8080 – la tua richiesta verrà servita:

Costruire i componenti

Una volta creato il modello, possiamo iniziare a creare il componente riutilizzabile di scorrimento verso l'alto, che si generalizza a qualsiasi app che desideri creare. Prima di definire il componente, prepariamo e ripuliamo il file App.vue starter che abbiamo creato con Vue CLI.

Pulizia del progetto Vue

Sotto src/App.vue, registreremo il componente che sarà presto disponibile come 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>

Creazione dell'interfaccia utente del pulsante

Con la pagina che mostrerà il pulsante (e le notizie) possiamo iniziare a costruire i componenti. Iniziamo dal pulsante!

Nel components cartella, crea un file AppButton.vue file. Nel pulsante includeremo un'icona che indica il freccia in su per trasmettere visivamente la funzionalità. Per l'icona stessa, utilizzeremo una libreria di icone chiamata Font Impressionante che ha oltre 19.000 icone di 6 stili e marchi, anche se questo può essere sostituito con un semplice segno di accento circonflesso (^), un'icona personalizzata o un'icona da altre librerie se non vuoi introdurre un'altra dipendenza.

Utilizzando il tuo gestore delle dipendenze preferito, installa il pacchetto core che contiene tutte le utilità per far funzionare le icone:

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

Successivamente, installeremo il file icone SVG solide gratuite (uno dei molteplici “set” o stili disponibili), utilizzando il seguente comando:

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

E infine, installeremo il file Componente Font Awesome Vue per Vue 3, utilizzando il seguente comando:

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

Prima di poter eseguire il rendering della nostra icona nel nostro pulsante, dobbiamo importare le dipendenze di Font Awesome installate nel nostro progetto, incluso il nome dell'icona specifica che vogliamo utilizzare. Aggiorniamo il 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')

Ora possiamo chiamare l'icona freccia su, come faArrowUpin AppButton.vue per visualizzarlo nell'interfaccia utente! Possiamo anche modellare il pulsante dal file componente:

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

Sul DOM, il nostro pulsante di scorrimento verso l'alto dovrebbe assomigliare a questo, quando apri l'applicazione su localhost:8080:

Creazione dell'interfaccia utente dei feed di notizie

Per creare un ambiente in cui un utente potrebbe voler utilizzare il pulsante, anziché scorrere manualmente, recuperiamo molti contenuti di notizie dall'API News gratuita. Per effettuare richieste di recupero, sfrutteremo il file axios pacchetto.

Se non lo hai già installato, puoi farlo tramite Yarn o NPM:

$ yarn add axios
# Or
$ npm install axios

Per utilizzare l'API News, dovrai registrare un conto – ottenere una chiave API gratuita per gli ambienti di sviluppo. Per questa demo, manterremo le cose semplici, recuperando semplicemente tutti gli articoli, ad esempio, su Bitcoin. Nel components cartella, creiamo un nuovo file chiamato NewsList.vue. in NewsList.vue, creeremo un elenco di articoli di notizie Bitcoin che riceveremo come risposta dall'API.

NewsList.vue ora dovrebbe includere i seguenti codici:

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

Quindi, ci assicuriamo di aggiornare App.vue, in modo che sia possibile visualizzare l'elenco degli articoli di notizie:

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

Di solito, vorresti impaginare i risultati, invece di accumularli. Tuttavia, stiamo creando specificamente un caso in cui è utile lo scorrimento verso l'alto.

Mostra/Nascondi il pulsante Scorri in alto utilizzando Scroll Listener

Nell'ambito di un'esperienza coinvolgente per l'utente, assicuriamoci che il pulsante di scorrimento verso l'alto venga visualizzato solo quando l'utente inizia a scorrere la pagina verso il basso.

Per raggiungere questo obiettivo, dobbiamo ascoltare l'evento di scorrimento nel punto in cui un utente scorre la pagina verso il basso.

Per prima cosa, prendiamo come target l'elemento button impostando un ref su di esso. Quindi, utilizziamo il file beforeUnmount() hook del ciclo di vita per aggiungere e rimuovere il pulsante dal DOM, con l'aiuto dello scroll listener - durante lo scorrimento verso il basso o verso l'alto della pagina. Possiamo anche verificare se un utente è nella parte superiore della pagina se window.scrollY è maggiore di 0. Con questo, possiamo alternare la visibilità del pulsante, dove necessario.

Aggiorniamo il file AppButton.vue componente per visualizzare o nascondere il pulsante in base alla distanza di scorrimento dell'utente:

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

Implementazione dell'evento di scorrimento

Ciò che ci resta a questo punto è fare in modo che il pulsante scorra effettivamente fino alla parte superiore della pagina quando un utente lo fa clic. Per raggiungere questo obiettivo, creiamo un scrollToTop() metodo in AppButton.vue. Questo è un metodo che invocheremmo quando window.scrollY = 0. Ora, quando il scrollToTop() viene chiamato il metodo, la nostra pagina scorre uniformemente fino alla parte più in alto e anche il pulsante scroll-top-top scompare:

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

Quando questo frammento di codice viene aggiunto a AppButton.vue, scoprirai che abbiamo implementato con successo una funzionalità di scorrimento verso l'alto nella nostra app Vue che possiamo collegare a qualsiasi progetto in cui abbiamo bisogno della stessa.

Conclusione

Congratulazioni per aver seguito fino alla fine! 🔥

In questo tutorial, abbiamo esaminato come creare una funzionalità di scorrimento verso l'alto in un'applicazione Vue. Questo è un componente generico riutilizzabile e può essere facilmente introdotto anche in altri progetti.

Risorse pertinenti