ng Infinite Scroll - 在每次鼠标滚动时都会调用 load More() 方法答案

【问题标题】：ngInfiniteScroll - loadMore() method gets called on every mouse-scrollng Infinite Scroll - 在每次鼠标滚动时都会调用 load More() 方法
【发布时间】：2014-07-03 05:17:19
【问题描述】：

下面关于 cmets 的解决方案。

问题：我的 loadMore() 方法会在每个容器的滚动条上执行。

含义：每次鼠标滚动父容器时都会执行 loadMore() (infinite-scroll-parent="true")

期望的结果：只有在infiniteScrollDistance满足其条件时才执行loadMore()，而不是我做的任何微小的滚动。

我的代码深受demo_basic 和demo_async 的启发。

我的应用是一个照片库。我通过 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

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

谢谢。

【问题讨论】：

如果你能在一个 plunker 中重新创建它会很有帮助，这样我们就可以看到错误在哪里。
Its little complicated..... Its an app under dev, and I cannot expose it yet... Its the whole app, and probably some issue with my css and height calculation, that existing in my app, but will not in a clean code example.... Thats why I tried to expose maximum possible components of my app, hopefully that maybe someone already experienced this problem that in his ngInfiniteScroll implementation... **Ill 看看我能做什么伙计们**
如果您可以在一个小型 plunker 应用程序中看到问题，那么您和我们都可以更轻松地进行调试。使用 chrome 开发工具查看报告的元素高度是否符合您的预期。
“cmets 下面的解决方案”是什么意思？
我评论了我的答案。这是一个让您感到舒适的直接链接 - stackoverflow.com/questions/23666712/…

标签： angularjs nginfinitescroll

【解决方案1】：

如果没有 Plunker 来查看实际代码，我会直接将您引导至 ngInfiniteScroll 常见问题解答：

为什么 ngInfiniteScroll 每次都会触发我的表情滚动事件？

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

【讨论】：

就是这样......当我试图解决我的问题时，我看到了那个常见问题，我的容器有高度（），他所有的父母（冒泡）也是...... . 我的容器有一个overflow:scrollcss 属性
尝试将无限滚动距离设置为 0。会发生什么？
我的问题是$Container 和$Elem 之间的计算。 shouldScroll 总是解析为真。
infinite-scroll-distance="0" 对我没有帮助。对不起。它甚至强制它立即执行 loadMore() 函数。
谢谢你。我已经修好了。我稍后会在我的问题下方记录。我会给你赏金。 谢谢。

【解决方案2】：

我的问题已经解决了。

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() 执行。

【讨论】：

看来这个包有很大的问题。我和我的大学似乎无法让您的代码与浮动儿童一起使用。我们已经尝试了文档和 SOF 中的所有内容。不走运，要编写我们自己的指令。

【解决方案3】：

让我加两分钱，遇到完全相同的问题，不同的解决方案！我整天都在调试 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

【讨论】：

谢谢你！它解决了我的向上滚动触发问题。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

希望它对某人有所帮助。

【讨论】：

【解决方案6】：

这似乎很明显，但它让我回避了一天。

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

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

infinite-scroll-distance="3"

根据the documentation，

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

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

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

【讨论】：

【解决方案7】：

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

【讨论】：