Saltar al contenido principal

InfiniteScroll

Abrir en ChatGPT
Sombra 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 grandes cantidades de datos al cargar contenido solo cuando es necesario.

Cuando los usuarios alcanzan el final del contenido desplazable, InfiniteScroll activa un evento para cargar más datos. Mientras se carga nuevo contenido, muestra un Spinner con texto personalizable para indicar que más elementos están en camino.

Gestión del estado​

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

Mostrar Código

Para obtener más datos cuando el usuario se desplaza, utiliza el método onScroll() o addScrollListener() para registrar un listener. Dentro del listener, normalmente cargas contenido adicional y llamas a update() para actualizar 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 evitar 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 Icono 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 espacio de contenido especial usando addToContent().

Cuando rellenes el espacio de contenido, reemplazará por completo el diseño de carga predeterminado.

Mostrar Código

Estilización​

Loading...