Question

向下滚动时，使用angular加载数据（json）的正确方法是什么？

Answer 1

我们做的是制作一个绑定到窗口滚动事件的指令，并调用范围函数来加载数据。

或者您可以使用ngInfiniteScroll。

Answer 2

<强> 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);
    }
   });
  }
 }
});

工作示例：http://plnkr.co/edit/FBaxdekW1Ya04S7jfz0V?p=preview？

Answer 3

虚拟滚动：仅显示视口中一小部分数据，并在用户滚动时不断更改记录。它使DOM元素的数量保持不变，从而提高了应用程序的性能。

这篇文章非常有帮助

https://medium.com/codetobe/learn-how-to-us-virtual-scrolling-in-angular-7-51158dcacbd4

使用AngularJS向下滚动页面时加载数据

3 个答案: