ngInfiniteScroll无法正常工作

Question

ngInfiniteScroll无法正常工作

Shy*_*ikh 9 javascript infinite-scroll angularjs nginfinitescroll

我试图让ngInfiniteScroll工作,但徒劳无功--Plunker.滚动事件仅在页面加载时触发,之后似乎没有任何内容触发它.任何人都可以请一些亮点.

我尝试了各种组合,没有工作:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent

infinite-scroll='loadMore()' infinite-scroll-distance='2'

Run Code Online (Sandbox Code Playgroud)

HTML:

<body ng-app="app" ng-controller="listController">
      <div id="list-wrapper">
          <div class="list" infinite-scroll='loadMore()' 
        infinite-scroll-distance='2' 
        infinite-scroll-container="'#list-wrapper'">
            <div class="header">

            </div>

            <div class="list-table" >
                <table class="table">
                    <tbody>
                        <tr ng-repeat="item in infiniteList">
                            <td style="width:100%">
                                <div>{{item}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style='clear: both;'></div>
            </div>
      </div>

Run Code Online (Sandbox Code Playgroud)

JS:

var app = angular.module("app", ['infinite-scroll']);

app.controller('listController', ['$scope','$http', function ($scope,$http) {
    $scope.infiniteList = [];
    $scope.incr = 1;

    $scope.loadMore = function(){
      console.log("scroll");
        for(var i = 0; i< 30; i++){
            $scope.infiniteList.push("Item " + $scope.incr);
            $scope.incr +=1;
        }
    };

}]);

Run Code Online (Sandbox Code Playgroud)

Answer 1

gau*_*430 9

编辑:您正在使用最新稳定版本的ngInfinite Scroll,它没有-container和-parent方法,我已经使用开发的ngInfiniteScroll.js更新了plunker,现在您可以在这里看到工作代码:

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

旧:

只要元素的底部接近浏览器窗口的底部,ngInfiniteScroll就会调用myPagingFunction()

因此,如果您更改了css并删除了最大高度,以便列表覆盖页面,您将看到当用户滚动浏览页面时infinitescroll正在工作.

#list-wrapper{
    //max-height: 400px;
    overflow-y: scroll;

    margin-top: 20px;
    border: solid 1px black;
}

Run Code Online (Sandbox Code Playgroud)

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

另见:angularjs在容器中无限滚动

归档时间：	9 年，11 月前
查看次数：	14024 次
最近记录：	7 年，3 月前