Desplácese hasta la parte superior en Vue con componentes reutilizables

Al mejorar la experiencia del usuario en cualquier sitio web con mucho contenido en sus páginas web, es común que los desarrolladores frontend implementen una funcionalidad de desplazamiento hacia arriba a través de un botón, para que las cosas sean más agradables y convenientes para los usuarios.

Si bien los usuarios pueden usar el comando + flecha hacia arriba en un teclado, también es importante tener en cuenta que potencialmente más de la mitad de sus usuarios podría estar usando dispositivos móviles y no usará un teclado conectado a su teléfono mientras se desplaza por su sitio web. Las pantallas más pequeñas a menudo también requieren más desplazamiento, lo que hace que la navegación de abajo hacia arriba sea laboriosa.

En esta guía, implementaremos un botón de desplazamiento hacia arriba con Vue 3, paso a paso. Junto con el componente reutilizable, crearemos una aplicación de noticias que proporcione noticias de última hora de varias fuentes con la API de noticias.

Configuración del proyecto

Comenzar con el marco Vue.JS es tan simple como incluir un archivo JavaScript en un archivo HTML. Pero para una aplicación del mundo real y a gran escala, el vue-cli es la mejor manera de empezar! Usaremos el vue-cli en nuestro tutorial de hoy.

Vamos a crear el proyecto y nombrarlo vue-scroll-to-top, usando el siguiente comando:

$ vue create vue-scroll-to-top

Esto crea una plantilla para comenzar a construir nuestro proyecto. Puede iniciar la aplicación moviéndose al proyecto:

$ cd vue-scroll-to-top

Y serve con hilo o NPM:

$ yarn serve

o:

$ npm run serve

On localhost, en el puerto 8080 – su solicitud será notificada:

Construcción de los componentes

Con la plantilla activada, podemos comenzar a crear el componente de desplazamiento hacia arriba reutilizable, que se generaliza a cualquier aplicación que desee crear. Antes de definir el componente, preparemos y limpiemos el App.vue starter que hemos creado con Vue CLI.

Limpieza del proyecto Vue

under src/App.vue, registraremos el futuro componente como 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>

Creación de la interfaz de usuario del botón

Con la página que mostrará el botón (y las noticias), podemos comenzar a construir los componentes. ¡Comencemos con el botón!

En components carpeta, cree una AppButton.vue expediente. En el botón, incluiremos un ícono que signifique el flecha arriba transmitir visualmente la funcionalidad. Para el ícono en sí, usaremos una biblioteca de íconos llamada Fuente impresionante que tiene más de 19.000 íconos en 6 estilos y marcas, aunque esto se puede sustituir con un simple signo de intercalación (^), un ícono personalizado o un ícono de otras bibliotecas si no desea introducir otra dependencia.

Con su administrador de dependencias preferido, instale el paquete principal que contiene todas las utilidades para que los íconos funcionen:

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

A continuación, instalaremos el iconos SVG sólidos gratis (uno de los múltiples “conjuntos” o estilos disponibles), usando el siguiente comando:

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

Y por último, instalaremos el Componente Font Awesome Vue para Vue 3, usando el siguiente comando:

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

Antes de que podamos representar nuestro ícono en nuestro botón, debemos importar las dependencias de Font Awesome instaladas en nuestro proyecto, incluido el nombre del ícono específico que queremos usar. Actualicemos el main.js archivo:

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

Ahora podemos llamar al icono de flecha hacia arriba, como faArrowUpen AppButton.vue para representarlo en la interfaz de usuario! También podemos diseñar el botón desde el archivo del 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>

En el DOM, nuestro botón de desplazamiento hacia arriba debería verse así, cuando abre su aplicación en localhost:8080:

Creación de la interfaz de usuario de fuentes de noticias

Para crear un entorno en el que un usuario pueda querer usar el botón, en lugar de desplazarse manualmente, obtengamos mucho contenido de noticias de la API de noticias gratuita. Para realizar solicitudes de búsqueda, aprovecharemos la axios paquete.

Si aún no lo tiene instalado, puede hacerlo a través de Yarn o NPM:

$ yarn add axios
# Or
$ npm install axios

Para utilizar la API de noticias, deberá registrar un cuenta – para obtener una clave API que es gratuita para entornos de desarrollo. Para esta demostración, mantendremos las cosas simples, simplemente obteniendo todos los artículos sobre, digamos, Bitcoin. En el components carpeta, creemos un nuevo archivo llamado NewsList.vue. En NewsList.vue, crearemos una lista de artículos de noticias de Bitcoin que recibiremos como respuesta de la API.

NewsList.vue ahora debe incluir los siguientes códigos:

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

Luego, nos aseguramos de actualizar App.vue, para que se pueda visualizar la lista de noticias:

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

Por lo general, le gustaría paginar los resultados, en lugar de que se acumulen. Sin embargo, estamos creando específicamente un caso en el que un desplazamiento hacia arriba es útil.

Mostrar/ocultar el botón Desplazarse hacia arriba mediante el detector de desplazamiento

Como parte de una experiencia atractiva para el usuario, asegurémonos de que el botón de desplazamiento hacia arriba se muestre solo cuando el usuario comience a desplazarse hacia abajo en la página.

Para lograr esto, tenemos que escuchar el evento de desplazamiento en el punto en que el usuario se desplaza hacia abajo en la página.

Primero, apuntemos al elemento del botón al establecerle una referencia. Entonces, hacemos uso de la beforeUnmount() ganchos de ciclo de vida para agregar y eliminar el botón del DOM, con la ayuda del oyente de desplazamiento, al desplazarse hacia abajo en la página o hacia la parte superior de la página. También podemos comprobar si un usuario está en la parte superior de la página si window.scrollY es mayor que 0. Con esto, podemos alternar la visibilidad del botón, donde sea necesario.

Actualicemos el AppButton.vue componente para mostrar u ocultar el botón en función de cuánto se haya desplazado el usuario:

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

Implementación de evento de desplazamiento

Lo que nos queda en este punto es hacer que el botón se desplace hasta la parte superior de la página cuando un usuario haga clic en él. Para lograr esto, vamos a crear un scrollToTop() método en AppButton.vue. Este es un método que invocaríamos cuando window.scrollY = 0. Ahora, cuando el scrollToTop() se llama al método, nuestra página se desplaza suavemente a la parte superior y el botón de desplazamiento superior también desaparece:

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

Cuando se agrega este fragmento de código a AppButton.vue, encontrará que hemos implementado con éxito una funcionalidad de desplazamiento hacia arriba en nuestra aplicación Vue que podemos conectar a cualquier proyecto en el que necesitemos lo mismo.

Conclusión

¡Felicitaciones por seguirme hasta el final! 🔥

En este tutorial, vimos cómo crear una funcionalidad de desplazamiento hacia arriba en una aplicación Vue. Este es un componente genérico reutilizable y también se puede introducir fácilmente en otros proyectos.

Recursos relevantes