Question

评论下面的解决方案。

问题：我的loadMore（）方法在每个容器的滚动上执行。

含义：loadMore（）在父容器的每个鼠标滚动上执行（infinite-scroll-parent="true"）

期望的结果：只有当infiniteScrollDistance符合条件时才能执行loadMore（），而不是执行任何细微的滚动。

我的应用是一个照片库。我通过ajax调用加载照片，并将它们填充到缩略图指令转发器中。我在控制器初始化时禁用ng-Infinite-Scroll，并在回调成功时启用它。

    <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>

我的咖啡代码没有任何意外。它的逻辑是不重要的，因为如果我放置一个简单的console.log，问题仍然会发生.....

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

我的缩略图指令是一样的。没有惊喜，当最后一张照片被填充到转发器上时，我启用了组件。

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

我不知道我错过了什么或做错了什么。我希望有人会来这里帮助我。

谢谢。

Answer 1

如果没有Plunker查看实际代码，我会直接指向ngInfiniteScroll FAQ：

为什么ngInfiniteScroll会在每一个上触发我的表达式   滚动事件？

infiniteScroll指令使用它所在元素的高度   附着以确定有多接近底部   它是窗口。在某些情况下，浏览器可以报告高度为0，   这会导致这种行为。通常，这是由于容器造成的   仅包含浮动子元素的元素。最简单的修复方法   这个问题是添加一个＆＃34; spacer＆＃34;元素到底部   容器（类似<div style='clear: both;'></div>); see this StackOverflow question and its associated answers的详细信息。

Answer 2

让我加上我的两分钱，有完全相同的问题，不同的解决方案！我整天都在调试ng-infinite-scroll。有一次，我意识到javascript报告$(window).height() == $(document).height()没有任何意义。

我做了一些谷歌搜索，当你错过DOCTYPE时会发生这种情况：jquery $(window).height() is returning the document height

但是，这还不够！我的DOCTYPE一度被浏览器吃掉了。您可以进一步阅读：Too big number of $(window).height() on wordpress

Answer 3

我已经解决了我的问题。

NIS（ ngInfiniteScroll ）衡量的基础属性之一是$container和$elem

$container是滚动元素Element的父级。
$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()次执行。

Answer 4

这似乎显而易见，但它让我回避了一天。

我按照the homepage of NIS上的图片中显示的示例：

要注意的重要部分是滚动距离：

infinite-scroll-distance="3"

根据the documentation，

如果浏览器窗口高度为1000像素且无限滚动距离设置为2，则当元素底部位于浏览器窗口底部的2000像素范围内时，将评估无限滚动表达式。默认为0（例如，当元素的底部穿过浏览器窗口的底部时，将评估表达式。）

在我的开发过程中，我只有大约50个项目显示，并且尽管错误地认为NIS无限制地射击。事实上，它只是试图填满~4000像素。

TL; DR：如果已设置，则删除（或至少减少）无限滚动距离。

Answer 5

花很多时间才弄明白。对我来说无限滚动的方法被无限调用，所以我做了一些研究和研究。得出的结论是，由于我的代码中无限滚动的“div”的高度为0，所以它根本没有增加，所以它一直在想用户是在页面的末尾。因此，我的解决方案是在“div”的下一个元素中添加一个“clearfix”html类，以进行无限滚动。

Answer 6

我有类似的问题，除了在我到达容器的末尾时无限滚动甚至不会停止加载（我使用v1.2中的无限滚动容器选项）。经过长时间的调试，我注意到容器高度是浮动的（例如634.245px），而内部元素高度接近它，但是int（例如635px）并且它会一遍又一遍地触发循环，因为它认为底部限制是到达。 ng-infinite-scroll的问题在于它的可视化并且它不处理实际数据，因此我必须检查后端返回的数据并在结果为空时阻止它（无限滚动禁用相关函数）。 / p>

Answer 7

我发现html格式应该有点像这样才能让nginfinitescroll工作。添加一个固定高度的虚拟外部div解决了我的问题

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

希望它对某人有帮助。

ngInfiniteScroll - 每次鼠标滚动都会调用loadMore（）方法

评论下面的解决方案。

7 个答案: