20

下面的评论解决方案。

问题：我的 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

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

谢谢你。

4

7 回答 7

17

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

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

infiniteScroll 指令使用它所附加的元素的高度来确定它与窗口底部的距离。在某些情况下，浏览器可能会报告高度为 0，从而导致此行为。通常，这是由于容器元素只包含浮动的子元素。解决此问题的最简单方法是在容器底部添加一个“spacer”元素（类似于<div style='clear: both;'></div>)；有关更多详细信息，请参阅此 StackOverflow 问题及其相关答案。

于 2014-05-19T14:44:40.703 回答
7

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

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

但是，这还不够！我的 DOCTYPE 一度被浏览器吃掉了。您可以进一步阅读：wordpress 上的 $(window).height() 数量过多

于 2014-08-07T18:06:08.650 回答
5

我已经解决了我的问题。

NIS ( ngInfiniteScroll ) 测量的基础属性之一是$container和$elem

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

于 2014-05-21T14:54:55.190 回答
1

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

我按照NIS 主页上图片中显示的示例进行操作：

在此处输入图像描述

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

infinite-scroll-distance="3"

根据文件，

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

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

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

于 2015-11-19T19:53:15.667 回答
1

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

于 2016-01-14T11:17:40.407 回答
0

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

于 2015-04-21T15:22:48.447 回答
0

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

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

希望它可以帮助某人。

于 2015-06-03T15:35:49.153 回答