Метод ngInfiniteScroll - loadMore() вызывается на каждом прокрутке мыши

Ответ 1

Я решил свою проблему.

Один из свойств фундамента, который измеряет NIS (ngInfiniteScroll), составляет $container и $elem

• $container является родительским элементом элемента с прокруткой.
• $elem - Элемент, содержащий прокрученные элементы.

Пример

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

Что NIS пытается сделать, заключается в вычислении на каждой прокрутке мыши, если включено, связи между этими двумя элементами, и проверьте, если $elem выше, чем $container, а затем прокрутите вниз или нет. (он также проверяет другие свойства, такие как - расстояние, немедленная проверка и отключение).

Таким образом, эта связь между этими двумя фундаментальными элементами имеет решающее значение для понимания и отладки NIS.

Итак, моя проблема была именно такой: $container и $elem были равны по высоте.
У меня были фиксированные значения высоты css (100%) для обоих элементов (в основном, я читал в документации, что мне нужно пройти высоту), и по ошибке я исправил $elem, что было совершенно неправильно.

Во-вторых - infinite-scroll-distance может привести к тому, что это произойдет. Если значение, которое вы устанавливаете, является высоким (допустим, 2), а ваш метод loadMore() не заполняет достаточное количество элементов, даже если вы отключите время выполнения метода, чем вы получите бесконечные loadMore() исполнения.

Ответ 2

Без Plunker, чтобы увидеть фактический код, я направлю вас на ngInfiniteScroll FAQ:

Почему ngInfiniteScroll запускает мое выражение на каждом событие прокрутки?

В директиве infinScroll используется высота элемента, прилагается к тому, чтобы определить, насколько близко к нижней части окно это. В некоторых случаях браузер может сообщать о высоте 0, что вызывает такое поведение. Обычно это происходит из-за контейнера который содержит только плавающие дочерние элементы. Самый простой способ исправить эта проблема заключается в добавлении элемента "spacer" в нижнюю часть контейнер (что-то вроде <div style='clear: both;'></div>); fooobar.com/questions/11628/... для более подробной информации.

Ответ 3

Позвольте мне добавить мои два цента, иметь ту же самую проблему, другое решение! Я весь день отлаживаю ng-infin-scroll. В какой-то момент я понял, что javascript сообщает $(window).height() == $(document).height(), что не имеет никакого смысла.

Я немного поработал в Google, и это происходит, когда вы пропускаете DOCTYPE: jquery $(window).height() возвращает высоту документа

Но этого было недостаточно! Мой DOCTYPE был съеден браузером в какой-то момент. Вы можете прочитать далее: Слишком большое количество $(window).height() в wordpress

Ответ 4

Это может показаться очевидным, но он уклонился от меня на день.

Я последовал примеру, показанному на картинке на домашней странице NIS:

Важная часть, которую нужно заметить, - это расстояние прокрутки:

infinite-scroll-distance="3"

Согласно документации,

если окно браузера имеет высоту 1000 пикселей, а для параметра бесконечного прокрутки установлено значение 2, выражение бесконечной прокрутки будет оцениваться, когда нижняя часть элемента находится в пределах 2000 пикселей от нижней части окна браузера. По умолчанию 0 (например, выражение будет оцениваться, когда нижняя часть элемента пересекает нижнюю часть окна браузера).

Во время моего развития у меня было всего около 50 предметов, которые отображались и, хотя и ошибочно, считали, что NIS стрелял бесконечно. Фактически, он просто пытался заполнить ~ 4000 пикселей.

TL; DR: Удалите (или, по крайней мере, уменьшите) бесконечное расстояние прокрутки, если оно установлено.

Ответ 5

Положите много времени, чтобы понять это. Для меня бесконечный метод прокрутки назывался бесконечно, поэтому я сделал небольшое исследование и пришел к выводу, что это происходило, потому что высота моего "div" для бесконечного прокрутки в моем коде была 0, не увеличивалась вообще, так что это было все время думая, что пользователь находится в конце страницы. Поэтому решение для меня заключалось в том, чтобы добавить класс clearlear html к следующему элементу "div" для бесконечного прокрутки.

Ответ 6

У меня была аналогичная проблема, за исключением того, что бесконечная прокрутка даже не прекращала загрузку к моменту окончания конца контейнера (я использовал параметр бесконечного прокрутки-контейнера из v1.2). После долгого отладки я заметил, что высота контейнера была float (например, 634.245px), тогда как высота внутреннего элемента была близка к ней, но int (например, 635px), и это вызывало бы цикл снова и снова, поскольку считалось, что нижний предел был достиг. Проблема с ng-infin-scroll заключается в том, что она визуальна и не имеет дело с фактическими данными, поэтому мне пришлось проверять возвращаемые данные из бэкэнд и блокировать ее, если результаты были пустыми (связанная с бесконечной функцией прокрутки функция).

Ответ 7

Я понял, что формат html должен быть таким же, как и для nginfinitescroll. Добавление фиктивного внешнего div с фиксированной высотой решило мою проблему

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

Надеюсь, это поможет кому-то.

Ответ 8

У меня была такая же проблема и много отладки, и выяснилось, что нам нужно установить "высоту" для родительского div, содержащего бесконечный прокрутки. Тогда это сработает.

<div id="scrollParent" style="height: 700px;">
<div id="myScroll" infinite-scroll='loadOrgEvents()'
infinite-scroll-disabled="isBusy"
infinite-scroll-container="'#scrollParent'"
infinite-scroll-distance="0"
infinite-scroll-use-document-bottom="false">