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

Cuando los usuarios llegan al 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 recuperar 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 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 completo para evitar más activaciones. Después de establecer como 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 usando 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("Buscando más registros...");
infiniteScroll.setText("Cargando más elementos...");

Del mismo modo, 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 espacio de contenido especial utilizando addToContent().

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

Mostrar Código

Estilo​

Loading...