ngInfiniteScroll 不工作
ngInfiniteScroll not working
我正在尝试让 ngInfiniteScroll 工作但徒劳无功 - Plunker。滚动事件仅在页面加载时触发,之后似乎没有任何东西触发它。谁能解释一下。
我尝试了各种组合,none 成功了:
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'
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>
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;
}
};
}]);
编辑:您使用的是最新稳定版的 ngInfinite Scroll,它没有 -container 和 -parent 方法,我已经用开发 ngInfiniteScroll.js 更新了 plunker,现在您可以看到工作代码在这里:
http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview
旧:
ngInfiniteScroll will call myPagingFunction() any time the bottom of
the element approaches the bottom of the browser window
所以,如果您更改 css 并删除最大高度,以便列表覆盖页面,您将看到当用户滚动经过页面时无限滚动正在工作。
#list-wrapper{
//max-height: 400px;
overflow-y: scroll;
margin-top: 20px;
border: solid 1px black;
}
http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview
另见:angularjs infinite scroll in a container
检查您的 MAIN HTML 或正文标签。它们可能包含一些溢出 css。所以在这种情况下页面滚动必须是包装器。
body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
和
<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy'
infinite-scroll-distance='0'
infinite-scroll-container="'body'">
这拯救了我的一天。
您可以检查 1.3.0 版本,它会检查 "infinite-scroll-parent"。
如果您使用的是 bower:bower install --save ngInfiniteScroll#1.3.0
<div class="scroll-container"> <!-- Fixed height is OK -->
<div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">
我正在尝试让 ngInfiniteScroll 工作但徒劳无功 - Plunker。滚动事件仅在页面加载时触发,之后似乎没有任何东西触发它。谁能解释一下。
我尝试了各种组合,none 成功了:
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'
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>
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;
}
};
}]);
编辑:您使用的是最新稳定版的 ngInfinite Scroll,它没有 -container 和 -parent 方法,我已经用开发 ngInfiniteScroll.js 更新了 plunker,现在您可以看到工作代码在这里:
http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview
旧:
ngInfiniteScroll will call myPagingFunction() any time the bottom of the element approaches the bottom of the browser window
所以,如果您更改 css 并删除最大高度,以便列表覆盖页面,您将看到当用户滚动经过页面时无限滚动正在工作。
#list-wrapper{
//max-height: 400px;
overflow-y: scroll;
margin-top: 20px;
border: solid 1px black;
}
http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview
另见:angularjs infinite scroll in a container
检查您的 MAIN HTML 或正文标签。它们可能包含一些溢出 css。所以在这种情况下页面滚动必须是包装器。
body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
和
<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy'
infinite-scroll-distance='0'
infinite-scroll-container="'body'">
这拯救了我的一天。
您可以检查 1.3.0 版本,它会检查 "infinite-scroll-parent"。
如果您使用的是 bower:bower install --save ngInfiniteScroll#1.3.0
<div class="scroll-container"> <!-- Fixed height is OK -->
<div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">