以下是一个使用AngularJS实现无限滚动指令,仅显示前20行的示例代码:
HTML模板:
{{item}}
AngularJS控制器代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [];
$scope.loadMore = function() {
for (var i = 0; i < 20; i++) {
$scope.items.push('Item ' + ($scope.items.length + 1));
}
};
$scope.loadMore();
})
.directive('infiniteScroll', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attrs.infiniteScroll);
}
});
}
};
});
在这个示例中,infinite-scroll
指令绑定在一个具有滚动功能的元素上,当用户滚动到底部时,会触发loadMore
函数来加载更多数据。在loadMore
函数中,我们每次加载20个新的数据项,并将其添加到$scope.items
数组中。初始时,会自动加载第一批数据。
注意,这个示例中的infinite-scroll-distance="2"
属性可以设置滚动到离底部2倍元素高度时触发加载更多数据。你可以根据需要进行调整。
下一篇:AngularJS下拉菜单分组