angularjs - ngx - scroll angular 4

ngInfiniteScroll: se invoca el método loadMore() en cada desplazamiento del mouse

Question

Solución abajo en los comentarios.

Problema : mi método loadMore () se ejecuta en el desplazamiento de cada contenedor.

Significado : loadMore () se ejecuta en cada desplazamiento del mouse del contenedor principal ( infinite-scroll-parent="true" )

Resultado deseado : para que loadMore () se ejecute solo cuando infiniteScrollDistance cumpla con sus condiciones, en lugar de cualquier pequeño rollo que haga.

Mi código está altamente inspirado en demo_basic & demo_async .

Mi aplicación es una galería de fotos. Cargo las fotos mediante una llamada ajax y las coloco en un repetidor de directivas de miniaturas. Deshabilito ng-Infinite-Scroll en la inicialización del controlador, y lo habilito en el proceso de devolución de llamada.

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll=''loadMore()'' 
                    infinite-scroll-disabled=''album.busy'' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance=''2''>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

Mi código de café no tiene sorpresas. Su lógica no es importante, porque si coloco una consola.log simple, el problema sigue ocurriendo ...

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log(''loadMore() been executed here'')

Mi directiva en miniatura es la misma. Sin sorpresas, en el momento en que las últimas fotos se rellenan en el repetidor, habilito el componente.

    app.directive ''myPhotoDirective'', [''$window'', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

No tengo idea de lo que me estoy perdiendo o haciendo mal. Espero que alguien esté aquí para ayudarme.

Gracias.

Answer 1

Déjame agregar mis dos centavos, tuve exactamente el mismo problema, ¡solución diferente! He estado depurando ng-infinite-scroll todo el día. En un momento dado, me di cuenta de que javascript informa $(window).height() == $(document).height() que no tiene ningún sentido en absoluto.

Hice un poco de googlear, y sucede cuando te falta DOCTYPE: jquery $ (window) .height () está devolviendo la altura del documento

¡Pero eso no fue suficiente! Mi DOCTYPE fue consumido por el navegador, en un momento dado. Puedes leer más: Número demasiado grande de $ (ventana) .height () en wordpress

Answer 2

Dedique mucho tiempo para averiguarlo. Para mí, el método del rollo infinito se llamaba infinitamente, así que investigué un poco y llegué a la conclusión de que estaba ocurriendo porque la altura de mi "div" para el rollo infinito en mi código era 0, no aumentaba en absoluto, así que era pensando todo el tiempo que el usuario estuvo al final de la página. Así que la solución para mí fue agregar una clase html "clearfix" al siguiente elemento de la "div" para un desplazamiento infinito.

Answer 3

Descubrí que el formato html debería ser algo así para que nginfinitescroll funcione. La adición de un div exterior simulado con altura fija solucionó mi problema

<div style="height:500px;">
   <div  infinite-scroll="myPagingFunction()">
     <div  ng-repeat="x in images"></div>
   </div>
</div>

Espero que ayude a alguien.

Answer 4

Esto puede parecer obvio, pero me evadió por un día.

Seguí el ejemplo que se muestra en la imagen en la página de inicio de NIS :

La parte importante a notar es la distancia de desplazamiento:

infinite-scroll-distance="3"

Según la documentación ,

Si la ventana del navegador tiene una altura de 1000 píxeles y la distancia de desplazamiento infinito se establece en 2, la expresión de desplazamiento infinito se evaluará cuando la parte inferior del elemento esté dentro de los 2000 píxeles de la parte inferior de la ventana del navegador. El valor predeterminado es 0 (por ejemplo, la expresión se evaluará cuando la parte inferior del elemento cruce la parte inferior de la ventana del navegador).

Durante mi desarrollo, solo tenía ~ 50 elementos que mostraban, y pensé, aunque de manera incorrecta, que NIS estaba disparando infinitamente. De hecho, solo estaba tratando de llenar ~ 4000 píxeles.

TL; DR: elimina (o al menos reduce) la distancia infinita de desplazamiento si la tienes configurada.

Answer 5

Sin un Plunker para ver el código real, lo dirigiré directamente a las Preguntas Frecuentes de ngInfiniteScroll:

¿Por qué ngInfiniteScroll activa mi expresión en cada evento de desplazamiento único?

La directiva infiniteScroll utiliza la altura del elemento al que se adjunta para determinar qué tan cerca está de la parte inferior de la ventana. En algunos casos, el navegador puede informar una altura de 0, lo que provoca este comportamiento. Por lo general, esto se debe a un elemento contenedor que solo contiene elementos secundarios flotantes. La forma más sencilla de solucionar este problema es agregar un elemento "espaciador" en la parte inferior del contenedor (algo como <div style=''clear: both;''></div>) ; vea esta pregunta de y sus respuestas asociadas para más detalles.

Answer 6

Tuve un problema similar, excepto que el desplazamiento infinito ni siquiera detendría la carga cuando llegué al final del contenedor (usé la opción de contenedor de desplazamiento infinito de v1.2). Después de una larga depuración, noté que la altura del contenedor era flotante (634.245px por ejemplo), mientras que la altura del elemento interno estaba cerca de ella, pero int (635px por ejemplo) y dispararía el ciclo una y otra vez, porque pensaba que el límite inferior era alcanzado. El problema con ng-infinite-scroll es que es visual y no trata con datos reales, por lo que tuve que verificar los datos devueltos desde el backend y bloquearlos si los resultados estaban vacíos (función relacionada con infinite-scroll-deshabilitado).

Answer 7

He solucionado mi problema.

Una de las propiedades fundamentales que miden NIS ( ngInfiniteScroll ), son $container y $elem

1. $container es el elemento primario del elemento de elementos desplazados.
2. $elem es el elemento que contiene los elementos desplazados.

Ejemplo

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

Lo que NIS está tratando de hacer es calcular en cada desplazamiento del mouse, si está habilitado, la relación entre estos dos elementos, y verificar si $elem es más alto que $container , y luego desplazarse hacia abajo o no. (También verifica otras propiedades como - distancia, control inmediato y desactivado).

Por lo tanto, esta relación entre estos dos elementos fundamentales es crucial para la comprensión y depuración de NIS.

Así que mi problema era exactamente eso: el $ container y $ elem eran iguales en su altura.
Tenía valores de altura de css fijos (100%) en ambos elementos (principalmente porque leí en la documentación que debo aprobar la altura) y, por error, $elem que estaba totalmente equivocado.

En segundo lugar, infinite-scroll-distance puede hacer que esto suceda también. Si el valor que está configurando es alto (digamos 2), y su método loadMore() no llena suficientes elementos, incluso si deshabilita el tiempo de ejecución del método, entonces obtendrá infinitas loadmore() .