Faites défiler vers le haut dans Vue avec des composants réutilisables

Pour améliorer l'expérience utilisateur sur n'importe quel site Web avec beaucoup de contenu sur ses pages Web, il est courant que les développeurs frontend implémentent une fonctionnalité de défilement vers le haut via un bouton, pour rendre les choses plus agréables et pratiques pour les utilisateurs.

Alors que les utilisateurs peuvent utiliser la commande + flèche vers le haut sur un clavier, il est également important de garder à l'esprit que potentiellement plus de la moitié de vos utilisateurs utilisent peut-être des appareils mobiles et n'utiliseront pas de clavier connecté à leur téléphone lorsqu'ils parcourent votre site Web. Les écrans plus petits nécessitent souvent plus de défilement, ce qui rend la navigation de bas en haut laborieuse.

Dans ce guide, nous allons implémenter un bouton de défilement vers le haut à l'aide de Vue 3 - étape par étape. Parallèlement au composant réutilisable, nous allons créer une application d'actualités qui fournira des informations de dernière minute provenant de diverses sources avec le API d'actualités.

Configuration du projet

Pour démarrer avec le framework Vue.JS, il suffit d'inclure un fichier JavaScript dans un fichier HTML. Mais pour une application réelle et à grande échelle, le vue-cli est la meilleure façon de commencer ! Nous utiliserons le vue-cli dans notre tutoriel d'aujourd'hui.

Créons le projet et nommons-le vue-scroll-to-top, en utilisant la commande ci-dessous :

$ vue create vue-scroll-to-top

Cela crée un modèle pour commencer à construire notre projet. Vous pouvez démarrer l'application en vous déplaçant dans le projet :

$ cd vue-scroll-to-top

Et serve avec Yarn ou NPM :

$ yarn serve

Ou:

$ npm run serve

On localhost, au port 8080 – votre demande sera signifiée :

Construire les composants

Avec le modèle créé, nous pouvons commencer à créer le composant de défilement vers le haut réutilisable, qui se généralise à toute application que vous souhaitez créer. Avant de définir le composant, préparons et nettoyons le App.vue démarreur que nous avons créé avec Vue CLI.

Nettoyage du projet Vue

Sous src/App.vue, nous enregistrerons le futur composant en tant que 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>

Construire l'interface utilisateur du bouton

Avec la page qui affichera le bouton (et les nouvelles) - nous pouvons commencer à construire les composants. Commençons par le bouton !

Dans le components dossier, créez un AppButton.vue dossier. Dans le bouton, nous inclurons une icône qui signifie le flèche vers le haut pour transmettre visuellement la fonctionnalité. Pour l'icône elle-même, nous utiliserons une bibliothèque d'icônes appelée Font Awesome qui a plus de 19.000 6 icônes sur XNUMX styles et marques, bien que cela puisse être remplacé par un simple signe caret (^), une icône personnalisée ou une icône d'autres bibliothèques si vous ne souhaitez pas introduire une autre dépendance.

À l'aide de votre gestionnaire de dépendances préféré, installez le package principal qui contient tous les utilitaires permettant de faire fonctionner les icônes :

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

Ensuite, nous allons installer le icônes SVG solides gratuites (l'un des multiples "ensembles" ou styles disponibles), en utilisant la commande suivante :

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

Et enfin, nous allons installer le Composant Font Awesome Vue pour Vue 3, en utilisant la commande suivante :

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

Avant de pouvoir rendre notre icône dans notre bouton, nous devons importer les dépendances installées de Font Awesome dans notre projet, y compris le nom d'icône spécifique que nous voulons utiliser. Mettons à jour le main.js fichier:

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

Nous pouvons maintenant appeler l'icône flèche vers le haut, comme faArrowUpen AppButton.vue pour le rendre dans l'interface utilisateur ! Nous pouvons également styliser le bouton à partir du fichier composant :

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

Sur le DOM, notre bouton de défilement vers le haut devrait ressembler à ceci, lorsque vous ouvrez votre application sur localhost:8080:

Création de l'interface utilisateur des fils d'actualité

Pour créer un environnement dans lequel un utilisateur pourrait vouloir utiliser le bouton, plutôt que de faire défiler manuellement, récupérons beaucoup de contenu d'actualités à partir de l'API News gratuite. Pour effectuer des requêtes de récupération, nous tirerons parti de la axios paquet.

Si vous ne l'avez pas déjà installé, vous pouvez le faire via Yarn ou NPM :

$ yarn add axios
# Or
$ npm install axios

Pour utiliser l'API News, vous devez enregistrer un Compte – pour obtenir une clé API gratuite pour les environnements de développement. Pour cette démo, nous allons garder les choses simples, en récupérant simplement tous les articles sur, disons, Bitcoin. Dans le components dossier, créons un nouveau fichier appelé NewsList.vue. En NewsList.vue, nous allons créer une liste d'articles d'actualité Bitcoin que nous obtiendrions en réponse de l'API.

NewsList.vue devrait maintenant inclure les codes suivants :

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

Ensuite, nous nous assurons de mettre à jour App.vue, afin que la liste des articles de presse puisse être affichée :

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

Habituellement, vous voudriez paginer les résultats, au lieu de les empiler. Cependant, nous créons spécifiquement un cas dans lequel un défilement vers le haut est utile.

Afficher/masquer le bouton de défilement vers le haut à l'aide de l'écouteur de défilement

Dans le cadre d'une expérience attrayante pour l'utilisateur, assurons-nous que le bouton de défilement vers le haut n'est révélé que lorsque l'utilisateur commence à faire défiler la page.

Pour y parvenir, nous devons écouter l'événement de défilement au moment où un utilisateur fait défiler la page.

Tout d'abord, ciblons l'élément bouton en lui attribuant une référence. Ensuite, nous utilisons le beforeUnmount() crochets de cycle de vie pour ajouter et supprimer le bouton du DOM, à l'aide de l'écouteur de défilement - lors du défilement vers le bas de la page ou vers le haut de la page. Nous pouvons également vérifier si un utilisateur est en haut de la page si window.scrollY est supérieur à 0. Avec cela, nous pouvons basculer la visibilité du bouton, le cas échéant.

Mettons à jour le AppButton.vue composant pour afficher ou masquer le bouton en fonction de la distance parcourue par l'utilisateur :

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

Implémentation d'un événement de défilement

Ce qui nous reste à ce stade est de faire défiler le bouton vers le haut de la page lorsqu'un utilisateur clique dessus. Pour y parvenir, créons un scrollToTop() méthode en AppButton.vue. Il s'agit d'une méthode que nous invoquerons lorsque window.scrollY = 0. Maintenant, quand le scrollToTop() est appelée, notre page défile en douceur jusqu'à la partie la plus haute, et le bouton scroll-top-top disparaît également :

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

Lorsque cet extrait de code est ajouté à AppButton.vue, vous constaterez que nous avons implémenté avec succès une fonctionnalité de défilement vers le haut dans notre application Vue que nous pouvons intégrer à tout projet nécessitant la même chose.

Conclusion

Félicitations pour avoir suivi jusqu'à la fin! 🔥

Dans ce didacticiel, nous avons examiné comment créer une fonctionnalité de défilement vers le haut dans une application Vue. Il s'agit d'un composant générique réutilisable et peut également être facilement introduit dans d'autres projets.

Ressources pertinentes