El desplazamiento infinito es útil cuando necesita mostrar grandes conjuntos de datos en su aplicación. Aprende a implementarlo en Vue.
El desplazamiento infinito es una técnica que puede usar para mostrar más contenido a medida que el usuario de su aplicación se desplaza hacia abajo en la página. Elimina la necesidad de paginación y permite a los usuarios de la aplicación continuar desplazándose por grandes conjuntos de datos.
Configuración de su aplicación Vue
Para seguir este tutorial, necesita una comprensión básica de Vue 3 y JavaScript. Debes saber manejar Solicitudes HTTP con Axios.
Para empezar a aprender a implementar desplazamiento infinito, cree una nueva aplicación Vue ejecutando lo siguiente npm comando en su directorio preferido:
npm create vue
Durante la configuración del proyecto, Vue le pedirá que seleccione un ajuste preestablecido para su aplicación. Elegir No para todas las funciones, ya que no necesitará ninguna adición a su aplicación.
Una vez que haya creado la nueva aplicación, navegue hasta el directorio de la aplicación y ejecute lo siguiente
npm comando para instalar los paquetes necesarios:npm install axios @iconify/vue @vueuse/core
El npm El comando instala tres paquetes: axios (para solicitudes HTTP), @iconificar/vue (para una fácil integración de iconos en Vue), y @vueuse/núcleo (que ofrece utilidades esenciales de Vue).
Usarás axios y @iconificar/vue para obtener datos y agregar iconos a su aplicación. @vueuse/núcleo contiene las utilidades de Vue, incluido el useInfiniteScroll componente para lograr un desplazamiento infinito.
Obtener datos ficticios de JSONPlaceholder API
Para implementar la función de desplazamiento infinito, necesita datos. Puede codificar estos datos u obtener datos de una fuente de API falsa gratuita como JSONMarcador de posición.
Obtener estos datos de JSONPlaceholder imita escenarios de la vida real, ya que la mayoría de las aplicaciones web obtienen datos de bases de datos en lugar de datos codificados.
Para obtener datos de la API para su aplicación Vue, cree una nueva carpeta en su origen directorio y nombrarlo API. En esa carpeta, cree un nuevo archivo JavaScript y pegue el siguiente código:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
exportdefault getComments;
El fragmento de código consta de una función asíncrona para obtener comentarios desde el extremo de la API. " https://jsonplaceholder.typicode.com/comments". Luego exporta la función.
Para explicar más, el fragmento de código comienza con la importación del axios biblioteca. A continuación, el código define el obtenerComentarios función con dos argumentos: máximo y omitir.
El obtenerComentarios alberga la función axios.get() método que realiza una solicitud GET a la URL. La URL contiene parámetros de consulta. máximo y omitir, que se interpolan dentro de la cadena usando literales de plantilla (``). Esto le permite pasar valores dinámicos a la URL.
Luego, la función devuelve una nueva matriz que consiste en el cuerpo de los comentarios recibidos desde el extremo de la API usando el mapa función.
Si se produce algún error, el fragmento de código lo registra en la consola. El fragmento de código luego exporta esta función a otras partes de su aplicación.
Ahora que ha manejado la lógica para obtener datos ficticios, puede crear un nuevo componente para mostrar los datos ficticios y manejar la función de desplazamiento infinito.
Crear un nuevo archivo InfiniteScroll.vue en el origen/componentes directorio y agregue el siguiente código: