javascript - infinite scroll angular 6



AngularJS Infinite Scrolling con muchos datos (5)

Así que resulta que el módulo ng-grid para AngularJS tiene casi exactamente lo que necesitaba. Si observa la página de ejemplos , el Ejemplo de procesamiento del lado del servidor también es una lista de desplazamiento infinito que solo carga los datos que se necesitan.

Gracias a quienes comentaron y respondieron de todos modos.

La última URL: ng-grid

Así que estoy intentando crear una tabla de desplazamiento infinita utilizando AngularJS, similar a esto: http://jsfiddle.net/vojtajina/U7Bz9/

El problema que tengo es que en el ejemplo de jsfiddle, si sigo desplazándome hasta obtener un millón de resultados, el navegador va a disminuir la velocidad de rastreo, ¿no es así? Porque ahora habría 1,000,000 resultados en $ scope.items. Sería mejor si solo tuviera, por ejemplo, 1000 resultados a la vez dentro de $ scope.items, y los resultados que estaba viendo están dentro de esos 1000 .

Ejemplo de caso de uso: la página se carga y veo los primeros 10 resultados (de 1,000,000 ). Aunque solo veo 10 , los primeros 1000 resultados están realmente cargados. Luego me desplazo al final de la lista para ver los últimos 10 artículos. Si vuelvo a subir a la cima, espero que los 10 resultados principales se carguen nuevamente desde el servidor.

Tengo un proyecto que hice con ExtJS que una situación similar: una lista de desplazamiento infinita con varios miles de resultados. La forma en que ExtJS manejó esto fue cargar la página actual de resultados, y luego cargar previamente un par de páginas adicionales de resultados también. En cualquier momento, sin embargo, solo había 10 páginas de resultados almacenados localmente.

Así que supongo que mi pregunta es ¿cómo podría implementar esto en AngularJS? Sé que no he proporcionado mucho código, por lo que no espero que las personas solo den la respuesta codificada, sino al menos algunos consejos en qué dirección ir.


Echa un vistazo a virtualRepeat desde material angular

Implementa la reutilización dinámica de filas visibles en el área de la ventana gráfica, al igual que ui-scroll


Me gusta la implementación ui-scroll angular-ui ...

https://github.com/angular-ui/ui-scroll

... sobre ngInfiniteScroll. La principal diferencia con ui-scroll de un scroll infinito estándar es que los elementos anteriores se eliminan al salir de la ventana gráfica.

De su readme ...

La forma común de presentar al usuario una lista de elementos de datos de longitud indefinida es comenzar con una pequeña porción en la parte superior de la lista, lo suficiente para llenar el espacio en la página. Las filas adicionales se agregan al final de la lista a medida que el usuario se desplaza hacia abajo en la lista.

El problema con este enfoque es que a pesar de que las filas en la parte superior de la lista se vuelven invisibles cuando se desplazan fuera de la vista, siguen siendo parte de la página y siguen consumiendo recursos . A medida que el usuario se desplaza hacia abajo, la lista crece y la aplicación web se ralentiza.

Esto se convierte en un problema real si el html que representa una fila tiene controladores de eventos y / o observadores angulares adjuntos. Una aplicación web de complejidad media puede introducir fácilmente 20 observadores por fila. Lo que para una lista de 100 filas le da un total de 2000 observadores y una aplicación lenta.

Además, ui-scroll se mantiene activamente.



Un par de cosas:

  1. Es probable que las filas de "desplazamiento infinito" a "1,000,000" tengan problemas independientemente del marco, simplemente porque ha creado millones y millones de nodos DOM (suponiendo que tiene más de un elemento en cada registro)

  2. La implementación que estás considerando hacer con <li ng-repeat="item in items">{{item.foo}}</li> o algo así tendrá problemas muy rápidamente por una gran razón: {{item.foo}}} o cualquier ngBind como ese configurará un $watch en ese campo, lo que crea una gran cantidad de sobrecarga en forma de referencias de funciones, etc. Así, mientras 10,000 objetos pequeños en una "matriz" no serán que mal ... 10,000-20,000 referencias de funciones adicionales para cada uno de esos 10,000 artículos serán.

Lo que querría hacer en este caso sería crear una directiva que maneje la adición y eliminación de elementos DOM que están "demasiado lejos" fuera de vista, así como mantener los datos actualizados. Eso debería mitigar la mayoría de los problemas de rendimiento que pueda tener.

... bueno, el desplazamiento infinito no es simple, lamento decirlo.





angularjs