向下滚动时,使用angular
加载数据(json)的正确方法是什么?
答案 0 :(得分:1)
我们做的是制作一个绑定到窗口滚动事件的指令,并调用范围函数来加载数据。
或者您可以使用ngInfiniteScroll。
答案 1 :(得分:1)
<强> HTML 强>
<div id="fixed" when-scrolled="loadMore()">
<ul>
<li ng-repeat="i in items">{{product.name}}</li>
</ul>
</div>
<强> JS 强>
app.controller("MainController", function($scope, $http){
var counter = 0;
$scope.products = [];
$scope.loadMore = function() {
for (var i = 0; i < 10; i++) {
$scope.products.push({name: counter});
counter += 10;
}
};
$scope.loadMore();
}]);
myApp.directive("whenScrolled", function(){
return{
restrict: 'A',
link: function(scope, elem, attrs){
// we get a list of elements of size 1 and need the first element
raw = elem[0];
// we load more elements when scrolled past a limit
elem.bind("scroll", function(){
if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
scope.loading = true;
// we can give any function which loads more elements into the list
scope.$apply(attrs.whenScrolled);
}
});
}
}
});
答案 2 :(得分:0)
虚拟滚动:仅显示视口中一小部分数据,并在用户滚动时不断更改记录。它使DOM元素的数量保持不变,从而提高了应用程序的性能。
这篇文章非常有帮助
https://medium.com/codetobe/learn-how-to-us-virtual-scrolling-in-angular-7-51158dcacbd4