ngInfiniteScroll 是用于 AngularJS的无限滚动控件，特点是简单易用，是AngularJS应用最为广泛的”触底加载”控件。
<!DOCTYPE html> <html lang="en"> <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