, a veces nos encontramos con la necesidad de mostrar datos utilizando la técnica de desplazamiento infinito, es decir, cargar datos continuamente a medida que el usuario se desplaza por la página.

Desde que se agregó la API de Observador de intersección a los navegadores, crear un componente de desplazamiento infinito reutilizable nunca ha sido tan fácil. Vamos a aprender cómo podemos crear un componente de este tipo usando esta API.

Tenga en cuenta que no vamos a sumergirnos en la API de Observador de intersección, por lo que si no está familiarizado con ella, le recomiendo leer este artículo de antemano.

El concepto principal es colocar un elemento observable al final de una lista de elementos mostrados, para agregar más datos cuando el usuario llegue a la parte inferior de esa lista.

queremos hacer es flexible como sea posible, así que nos vamos a nuestros consumidores pasar cualquier plantilla que desea usar ng-content. Debajo de él, agregamos un elemento de anclaje que servirá como el elemento objetivo que observamos.

Vamos a crear el Observador de intersección:

Primero, creamos un nuevo IntersectionObserver que recibe entries como su argumento. Se llamará a esta función cada vez que el elemento observado entre en la ventana.

Podemos comprobar el estado de visibilidad del elemento mirando la propiedad isIntersection. Si isIntersecting es true, el elemento de destino se ha vuelto al menos tan visible como el umbral que se pasó. El umbral predeterminado es 0, lo que significa que tan pronto como un píxel sea visible, se ejecutará la devolución de llamada.

A continuación, llamamos al método observe(), pasándole el elemento de anclaje. Esto iniciará la observación de este elemento.

Support Admite contenedores desplazables

La propiedadroot indica el elemento que se utiliza como ventana de visualización para comprobar la visibilidad del destino. Cuando se establece en null, el valor predeterminado es la ventana del navegador.

Hay momentos en los que necesitaremos tener un contenedor desplazable, y luego querríamos que ese contenedor actuara como el elemento root. Admitamos esta funcionalidad:

Añadimos una comprobación para ver si el elemento host actual es un contenedor desplazable. Si lo es, lo establecemos como el elemento root.

Finalmente, no queremos fugas de memoria en nuestra aplicación, por lo que desconectaremos el observador cuando el componente se destruya:

Es tan simple como eso.

Veamos cómo lo usamos:

O con un contenedor desplazable:

Compatibilidad con navegadores

La API de Observador de intersección funciona en la mayoría de los navegadores principales. Si necesita admitir navegadores antiguos, como IE, puede cargar un relleno múltiple o una reserva en el evento de desplazamiento en tiempo de ejecución.

Have ¿Ya Has Probado Akita?

Akita, una de las bibliotecas de gestión estatal líderes, se ha utilizado en innumerables entornos de producción. Está en constante desarrollo y mejora.

Ya se trate de entidades que llegan del servidor o de datos de estado de la interfaz de usuario, Akita tiene tiendas personalizadas, potentes herramientas y complementos hechos a medida, que le ayudan a administrar los datos y a negar la necesidad de cantidades masivas de código repetitivo. Le recomendamos encarecidamente que lo pruebe.

Síganme en Medium o Twitter para leer más sobre Angular, Akita y JS!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.