在 paper-scroll-header 的滚动条上自动加载数据

Question

我正在开发一个使用 Polymer 和 Angular JS 的项目现在的代码没有组织，因为这只是一个教程但是我试图在屏幕上加载大量数据

为了做到这一点，我在带有 filter 、 orderby 和 limitto 的 li 标签上使用了 ng-repeat

我希望每次滚动到某个点时都增加 limitto 变量

在谷歌上搜索 iron-scroll-threshold 可以满足我的要求。然而，当我尝试实现它时，它没有按预期响应。

大小变量也放在 $scope.size 中，我如何在聚合物中使用它？

目前为了演示我到底想完成什么，我添加了一个按钮，点击它就可以完成所需的工作。

您可以在 https://github.com/chrisgiffy/chrisgiffy.github.io

中找到我的代码

http://chrisgiffy.github.io

中的演示

有人可以帮帮我吗？

P.S。我是 Angular 和 Polymer

的菜鸟

Answer 1

我能解决这个问题的最简单方法是使用 ngInfiniteScroll 小部件

<div ng-app="flash" ng-controller="cardController" class="flex" fixed id="headerPannel" infinite-scroll="scroll()" infinite-scroll-distance="3">
....
</div>

$scope.scroll = function(){
    if($window.scrollTop()>=720){
      $scope.size = +$scope.size + 50;
    }
    else if($window.scrollTop()<=200) {
      $scope.size = 50;
    }
  };

在 paper-scroll-header 的滚动条上自动加载数据

Automatically load data on scroll of paper-scroll-header

javascript

angularjs

polymer

polymer-1.0