Angular滚动到底部自动加载
ngInfiniteScroll 是用于 AngularJS的无限滚动控件，特点是简单易用，是AngularJS应用最为广泛的”触底加载”控件。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/angular.min.js'></script>
<script type='text/javascript' src='js/ng-infinite-scroll.min.js'></script>
<style>
[ng-cloak] {
display: none;
}
.bottom {
text-align: center;
}
img{
width: 100px;
}
</style>
<title>Angular滚动到底部自动加载</title>
</head>
<body ng-app="scrollApp">
<div ng-controller='scrollController' ng-cloak>
<div infinite-scroll='nextPage()' infinite-scroll-disabled='isData' infinite-scroll-distance='0'>
<div ng-repeat='item in items'>
<p>
<span>{{item.title}}</span>
<span>{{item.totalCount}}</span>
<span>{{item.weekCount}}</span>
</p>
</div>
<div ng-show='busy && !isData' class="bottom">
<img src="img/loading1.gif" alt="">
</div>
<div ng-show='isData' class="bottom">已经到底了</div>
</div>
</div>
<script>
var scrollAppModule = angular.module('scrollApp', ['infinite-scroll']);
scrollAppModule.controller('scrollController', function ($scope) {
$scope.items = [];
$scope.busy = false;
$scope.page = 0;
$scope.isData = false;
$scope.nextPage = function () {
if ($scope.busy) return;
$scope.busy = true;
var url = "/api/history/list?sort=1?size=10&start=" + $scope.page * 10;
$.ajax({
url: url,
method: 'GET',
contentType: 'text/plain;charset=utf-8',
success: function (res) {
var items = res.obj;
if (items.length < 10) {
$scope.isData = true;
}
for (var i = 0; i < items.length; i++) {
$scope.items.push(items[i]);
}
$scope.$apply(function () {
$scope.items = $scope.items;
$scope.busy = false;})
$scope.page += 1;
}
});
}
});
</script>
</body>
</html>
注意：不要把ng-repeat和infinite-scroll放在同一个标签内
1. jquery.min.js下载地址：http://www.bootcdn.cn/jquery/
2. angular.min.js下载地址：http://www.bootcdn.cn/angular.js/
3. ng-infinite-scroll.min.js下载地址：http://sroze.github.io/ngInfiniteScroll/
其他关于ngInfiniteScroll 的实例：http://sroze.github.io/ngInfiniteScroll/demo_async.html