5

我在 AngularJS + Node.js 应用程序上实现了无限滚动功能。

它基于这个 JSfiddle 并且工作方式相同：http: //jsfiddle.net/vojtajina/U7Bz9/ HTML：

<div id="fixed" when-scrolled="loadMore()">
  <ul>
   <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>​

Javascript：

function Main($scope) {
  $scope.items = [];

  var counter = 0;
   $scope.loadMore = function() {
     for (var i = 0; i < 5; i++) {
        $scope.items.push({id: counter});
        counter += 10;
     }
   };

  $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
  };
});

​</p>

我实现无限滚动的原因是为了节省我的用户带宽，除非用户想查看所有结果，否则不加载所有 1000 个结果及其相应的图像。

但是，当使用 AngularJS 过滤器在结果中搜索时，我遇到了问题，因为当然不是所有的结果都在那里（除非用户滚动到最底部），所以搜索只会返回所需结果的一小部分。

然后我删除了无限滚动功能以使搜索功能正常工作，但这在我打开页面时在 chrome 上（不是在 Firefox 上）提供了新问题，浏览器开始从顶部加载图像。如果我然后通过搜索以“z”开头的内容（在结果的最底部）来过滤结果，Firefox 会切换焦点并首先加载以“z”开头的结果（因为它们是唯一显示的结果）。然而，chrome 会继续通过列表加载，因此一旦加载了应用程序中的所有图像，用户只会看到他们的搜索结果（对于“z”）。

我正在寻找一种方法让 angular 同时在结果上提供无限滚动和适当的搜索过滤器。如果这是不可能的，那么一种让chrome首先加载可见图像的方法。

我目前正在尝试一些奇怪的东西，在范围内有一堆不同的数组，但到目前为止我还没有运气。

4

2 回答 2

8

由于这里有几个人有类似的问题并且我自己也在苦苦挣扎，所以我花时间创建了一个有效的小提琴（对于我的情况）。

https://jsfiddle.net/lisapfisterer/Lu4sbxps/

主要思想是使用无限滚动的函数调用动态扩展limitTo值

<div infinite-scroll="loadMore()" infinite-scroll-distance="20">
    <tr data-ng-repeat="logEvent in logEventFilter = (logEvents | filter:searchTerm | limitTo:numberToDisplay) track by $index">
        <td> {{$index}} </td>
        <td> {{logEvent.name}} </td>
        <td> {{numberToDisplay}} </td>
    </tr>
</div>

loadMore 只是增加了限制

$scope.loadMore = function() {
    if ($scope.numberToDisplay + 5 < $scope.logEvents.length) {
        $scope.numberToDisplay += 5;
    } else {
        $scope.numberToDisplay = $scope.logEvents.length;
    }
};
于 2016-02-09T13:40:46.157 回答
1

你想做的不是“不可能”，但肯定会有点复杂。

  • 让您的服务器执行所有“过滤”以确保返回的分页值是过滤器的正确值。
  • 当服务器返回结果时，将除图像标签的 src 属性之外的所有 HTML 渲染到屏幕上。这样，任何图像都不会开始加载。
  • 滚动到正确的“页面”。
  • 确保加载图像之前的所有高度都相同，现在做一些 JS 魔术来确定哪些是可见的。
  • 仅设置可见图像的 src 属性，订阅它们的“加载”事件并创建一个 $q 承诺，一旦所有加载完成，该承诺就完成。
  • 在该承诺完成后，设置其余图像 src 属性，以便加载其余图像。
于 2012-10-29T13:51:42.833 回答