Cómo implementar un scroll infinito con Vue.js

Introducción

El desplazamiento infinito es una función de los sitios web y las aplicaciones en la que el usuario se desplaza hacia abajo y llega al final de la página de contenido actual y luego se carga y se muestra la página siguiente. Este efecto reemplaza el clic en la navegación por paginación. En situaciones con dispositivos móviles y pantallas táctiles, el desplazamiento infinito puede ofrecer una mejor experiencia de usuario.

Esta función es especialmente útil cuando se necesita cargar grandes cantidades de datos o imágenes cuando el usuario los necesita, en lugar de hacerlo de una sola vez. Las redes sociales como Twitter, Facebook e Instagram han popularizado esta función a lo largo de los años.

En este tutorial, creará una aplicación Vue.js de ejemplo que utiliza desplazamiento infinito para obtener y mostrar datos de la API de usuario aleatorio .

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Puede resultar beneficioso tener cierta familiaridad con la configuración de un proyecto Vue.js y el uso de componentes Vue.js.

Este tutorial se verificó con Node v15.3.0, npmv6.14.9, vuev2.6.11 y axiosv0.21.0. Este tutorial se editó para reflejar los cambios en la migración desde versiones anteriores de @vue/cli.

Paso 1: Configuración del proyecto

Para el propósito de este tutorial, construirás a partir de un proyecto Vue predeterminado generado con @vue/cli.

npx @vue/cli create vue-infinite-scrolling-example --default

Esto configurará un nuevo proyecto Vue con configuraciones predeterminadas: Vue 2, babel, eslint.

Navegue hasta el directorio del proyecto recién creado:

cd vue-infinite-scrolling-example

A continuación, instale axios:

npm install axios@0.21.0

En este punto, deberías tener un nuevo proyecto Vue con soporte para Axios.

Paso 2: obtención de los datos iniciales del usuario

Existen varios paquetes npm para un desplazamiento infinito que puedes usar para tu aplicación Vue. Sin embargo, algunos de ellos pueden resultar excesivos para tus necesidades debido a funciones que no necesitas o a una gran cantidad de dependencias.

Para los fines de este tutorial, creará una función de JavaScript que obtenga un nuevo conjunto de datos cuando se desplace hasta la parte inferior de la ventana del navegador. Esto no requerirá complementos ni paquetes adicionales.

Primero, ábrelo App.vueen tu editor de código.

A continuación, reemplace el código en el templatecon una pantalla que recorra una matriz de userspara mostrar una imagen, nombre, apellido, fecha de nacimiento, ciudad y estado:

origen/App.vue

template  div    h1Random User/h1      div         class="user"         v-for="user in users"         :key="user.first"            div        img :src="user.picture.large" /      /div      div        h2          {{ user.name.first }}          {{ user.name.last }}        /h2        ul          listrongBirthday:/strong {{ formatDate(user.dob.date) }}/li          listrongLocation:/strong {{ user.location.city }}, {{ user.location.state }}/li        /ul      /div    /div  /div/template

Luego, reemplace el código con las stylereglas CSS para organizar la visualización de cada usuario:

origen/App.vue

style.user {  display: flex;  background: #ccc;  border-radius: 1em;  margin: 1em auto;}.user-avatar {  padding: 1em;}.user-avatar img {  display: block;  width: 100%;  min-width: 64px;  height: auto;  border-radius: 50%;}.user-details {  padding: 1em;}.user-name {  margin: 0;  padding: 0;  font-size: 2rem;  font-weight: 900;}/style

A continuación, reemplace el código con el scriptcódigo que realiza una solicitud inicial de cinco usuarios a la API y se llama durante el beforeMountciclo de vida:

origen/App.vue

scriptimport axios from "axios";export default {  data() {    return {      users: [],    };  },  methods: {    getInitialUsers() {      axios.get(`https://randomuser.me/api/?results=5`).then((response) = {        this.users = response.data.results;      });    },  },  beforeMount() {    this.getInitialUsers();  },};/script

La fecha de nacimiento (DOB) se proporciona como una cadena en formato ISO 8601. Para que sea más legible para las personas, puede convertir la cadena en una cadena de fecha utilizando Date.prototype.toDateString():

origen/App.vue

script// ...export default {  // ...  methods: {    formatDate(dateString) {      let convertedDate = new Date(dateString);      return convertedDate.toDateString();    }    // ...},  // ...};/script

Esta solicitud inicial mostrará cinco usuarios cuando un usuario abra la aplicación.

Nota: Anteriormente, este tutorial realizaba varias solicitudes a la API de usuario aleatorio para cargar inicialmente más que el resultado de un solo usuario. Esta sección se ha reescrito para utilizar el nuevo resultsparámetro que proporciona la API.

En la ventana de su terminal, compile y sirva la aplicación:

npm run serve

Después de abrir la aplicación en su navegador web, se mostrarán cinco usuarios aleatorios.

Paso 3: Implementación de la lógica de desplazamiento infinito

La lógica de desplazamiento infinito requerirá detectar cuándo el usuario ha llegado al final de la ventana. Esto se puede lograr con las siguientes tres propiedades:

• document.documentElement.offsetHeight:la cantidad de píxeles para toda la altura del elemento del documento.
• document.documentElement.scrollTop:la cantidad actual de píxeles posicionados desde la parte superior del elemento del documento.
• window.innerHeight:el número de píxeles para la altura de la pantalla.

Cuando document.documentElement.scrollTopmás window.innerHeightson iguales a document.documentElement.offsetHeight, se puede asumir que el usuario ha llegado al final de la ventana.

window.onscroll = () = {  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;  if (bottomOfWindow) {    // ...  }};

Aquí, window.onscrollescucha el scrollevento y realizará la verificación cuando se detecte el evento.

Nota: al vincular eventos, especialmente eventos de desplazamiento, es una buena práctica eliminar el rebote de los eventos. El rebote se produce cuando solo se ejecuta una función una vez que ha transcurrido una cantidad de tiempo específica desde la última llamada.

Sin embargo, para las necesidades de este tutorial, no se aplicará un antirrebote.

Dentro de la ifcondición, agreguemos un GETmétodo de servicio con Axios para buscar otro usuario aleatorio de la API de usuario aleatorio:

axios.get(`https://randomuser.me/api/`).then(response = {  this.users.push(response.data.results[0]);});

Ahora, vuelve App.vuea tu editor de texto y agrega tu nuevo código.

En su componente methods, deberá crear una nueva función llamada getNextUser()y cargarla en el mounted()método de ciclo de vida.

origen/App.vue

scriptimport axios from "axios";export default {  data() {    return {      users: [],    };  },  methods: {    formatDate(dateString) {      let convertedDate = new Date(dateString);      return convertedDate.toDateString();    },    getInitialUsers() {      axios.get(`https://randomuser.me/api/?results=5`).then((response) = {        this.users = response.data.results;      });    },    getNextUser() {      window.onscroll = () = {        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;        if (bottomOfWindow) {          axios.get(`https://randomuser.me/api/`).then(response = {            this.users.push(response.data.results[0]);          });        }      }    }  },  beforeMount() {    this.getInitialUsers();  },  mounted() {    this.getNextUser();  }}/script

Ahora, vuelva a compilar y sirva su aplicación.

Después de abrir la aplicación en su navegador web y desplazarse hasta la parte inferior de la página, se agrega un nuevo usuario a la página.

Con cada desplazamiento hasta el final de la página, obtienes datos nuevos con Axios y luego envías esos datos a una matriz.

Conclusión

En este tutorial, creaste una implementación de un desplazamiento infinito en una aplicación Vue.js. Se basó en beforeMountganchos mountedde ciclo de vida para inicializar y precargar las solicitudes a una API.

Para cargar imágenes de forma diferida, inserte una fuente de imagen en una matriz de datos, itérela en su templatey vincule su img :src=""a la matriz.

Si desea obtener más información sobre Vue.js, consulte nuestra página de temas de Vue.js para obtener ejercicios y proyectos de programación.