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 mucho contenido al cargar contenido solo cuando es necesario.

Cuando los usuarios alcanzan el final del contenido desplazable, InfiniteScroll dispara un evento para cargar más datos. Mientras se carga el nuevo contenido, se muestra un Spinner con texto personalizable para indicar que hay más elementos 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 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 evitar más disparadores. 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.

Reiniciar la bandera de carga

Puedes reiniciar esta bandera usando setCompleted(false) si luego 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 usando setText().

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

De manera similar, puedes personalizar el Icon mostrado durante la carga usando 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 la ranura de contenido especial usando addToContent().

Cuando llenas la ranura de contenido, reemplaza completamente el diseño de carga predeterminado.

Mostrar Código

Estilización​

Loading...