Paginación en Vue 3 con efecto ScrollUp utilizando $refs

La paginación siempre está de moda, sea un sistema de paginación tradicional, con scrollUp o scroll infinito. En esta entrada vamos a ver cómo crear una paginación en Vue 3 con efecto ScrollUp, para ello nos apoyaremos en las $refs, verás que todo es muy sencillo y tiene mucho sentido.

Para simular un ejemplo lo más real posible haremos uso de una API externa que nos ofrece resultados paginados, ideales para realizar este tipo de tutoriales. Instalar dependencias Lo primero que necesitamos hacer es instalar las dependencias necesarias, en este caso Axios, que aunque también vamos a utilizar TailwindCSS, ya lo explicamos aquí.

Para instalar Axios simplemente ejecuta el comando yarn add axios o npm install axios --save y lo tendrás listo. Variables de entorno Aunque no es un requisito, siempre es buena idea centralizar las variables de entorno en un archivo .env, así, cuando cambiemos de entorno simplemente podremos modificar su contenido en lugar del código, una muy mala práctica.

Así que crea tu archivo .env en la raíz de tu proyecto y añade la URL de la API que vamos a utilizar para nuestro sistema de paginación.

Composable usePagination Ahora es momento de crear nuestra función compositora, la cual fácilmente podemos extraer a otros proyectos con el consiguiente beneficio. Así que crea un archivo en el directorio src/composables llamado usePagination.js y añade el siguiente código que pasamos a explicar.

Tenemos datos reactivos para gestionar la información de la paginación actual, un método paginate que se encarga de hacer peticiones a la API con Axios, otro método setPage para definir la página actual y un par de datos calculados con computed que nos permitirán saber si estamos en la primera o en la última página, no necesitamos nada más.

Es importante fijarse también que dentro de pagination tenemos un dato llamado containerRef, esta es la referencia que utilizaremos para gestionar el scrollUp, fíjate en cómo lo utilizamos en el método paginate junto con el comportamiento (behaviour) smooth, con esto simplemente le añadimos una pequeña animación al scroll, nada más. Componente Paginación en Vue 3 Ahora que ya tenemos listo nuestro composable, vamos a crear el componente Pagination.vue dentro del directorio components y añadimos el siguiente código, con lo que ya lo tendremos todo listo.

La primera vez que el componente se carga y utilizando el hook onMounted hacemos la primera llamada al método paginate, así conseguimos los datos iniciales.

Importante, fíjate en cómo utilizamos ref con containerRef para asignar nuestra referencia, así el navegador sabrá dónde dejarnos al finalizar la paginación.

También puedes ver que dependiendo de si hemos finalizado la carga de datos mostramos una clases css u otra, así, añadiendo un poco de opacidad al contenedor, el usuario final sabe que estamos haciendo cosas, de cara a la UX queda bien, pero se puede mejorar mucho.