Saltar al contenido

InfiniteScroll

Abrir en ChatGPT
Shadow dwc-infinite-scroll 25.00
Java API

El componente InfiniteScroll en webforJ carga automáticamente más contenido a medida que los usuarios se desplazan hacia abajo, eliminando la necesidad de paginación. Esto crea una experiencia fluida para listas, feeds y vistas con muchos datos al cargar contenido solo cuando es necesario.

Cuando los usuarios llegan al final del contenido desplazable, InfiniteScroll desencadena un evento para cargar más datos. Mientras se cargan nuevos contenidos, muestra un Spinner con texto personalizable para indicar que más elementos están en camino.

Mostrar Código

Gestión de estado​

El componente InfiniteScroll emite eventos y mantiene un estado interno para ayudar a gestionar cómo y cuándo se carga el contenido.

Para obtener más datos cuando el usuario se desplaza, utiliza el método onScroll() o addScrollListener() para registrar un oyente. Dentro del oyente, normalmente cargas contenido adicional y llamas a update() para refrescar el estado de InfiniteScroll.

infiniteScroll.onScroll(event -> {
    infiniteScroll.add(new Paragraph("Elemento cargado"));
    infiniteScroll.update();
});

Una vez que todo el contenido ha sido cargado, marca el desplazamiento como completado para prevenir más activaciones. Después de establecer completado, recuerda llamar a update() para aplicar el nuevo estado:

infiniteScroll.setCompleted(true);
infiniteScroll.update();

Esto desactiva el comportamiento de desplazamiento infinito.

Restablecer la bandera de carga

Puedes restablecer esta bandera utilizando setCompleted(false) si más tarde permites al usuario cargar más contenido (por ejemplo, después de una actualización).

Personalización del indicador de carga​

Por defecto, InfiniteScroll muestra un indicador de carga integrado: un pequeño Spinner animado junto con un texto de “Cargando datos”. Puedes cambiar el texto mostrado pasando un mensaje personalizado al constructor de InfiniteScroll o utilizando setText().

InfiniteScroll infiniteScroll = new InfiniteScroll("Cargando más registros...");
infiniteScroll.setText("Cargando más elementos...");

De manera similar, puedes personalizar el Icon que se muestra durante la carga utilizando setIcon().

Mostrar Código

Personalización completa​

Si deseas reemplazar completamente tanto el Spinner como el texto con tu propio marcado, puedes agregar contenido directamente en el slot de contenido especial utilizando addToContent().

Cuando populas el slot de contenido, reemplazas completamente el diseño de carga predeterminado.

Mostrar Código

Estilización​

Loading...