Question

<div >
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>

$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];

    $scope.loadMore = function () {
        console.log('scroll');
        var last = $scope.images[$scope.images.length - 1];
        for (var i = 1; i <= 30; i++) {
            $scope.images.push(last + i);
        }
    };

loadMore函数仅在我进入页面时开始调用，向下滚动后此方法不再被调用，为什么会这样？

Answer 1

如果初始页面加载未填满视口高度，则不会调用 loadMore函数。添加infinite-scroll-immediate-check =“true” - 这将强制在页面加载时填充项目。

修改后的代码

<div>
    <div infinite-scroll='loadMore()' 
         infinite-scroll-distance='2' 
         infinite-scroll-immediate-check="true">
        <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
    </div>
</div>

参考infinite-scroll-immediate-check

Answer 2

<div infinite-scroll="functionName()" infinite-scroll-distance="1" infinite-scroll-container="'#yourContainer'" >

转到开发人员工具，找到需要无限滚动的容器，并给出名称容器。

用于文档检查链接 http://sroze.github.io/ngInfiniteScroll/documentation.html

ngInfiniteScroll loadMethod只调用一次

2 个答案: