我正在开发一个角度应用程序,其中主页面加载1000个图像,但用户一次只能查看20个。我的列表中还有几个过滤器,因此可以根据不同的标准对其进行过滤和排序。
我已经尝试了http://binarymuse.github.io/ngInfiniteScroll/#和http://ngscroller.herokuapp.com/,但似乎都没有那么好用。
Ngscroller可以正常工作但是当我尝试应用我的过滤器时它会中断。我也更喜欢这个,因为它不需要我包含jquery。有没有可以做我需要的简单指令?我正在尝试加速我的网页,但如果有一些已经完成此任务的东西我不想重新发明轮子。
以下是我对ngScroller的尝试:http://plnkr.co/edit/r0uhV3OxT2USxmrBQk22?p=preview
<div class="content" ng-controller="MainController" ng-scroller="content">
<ul class="list" ng-scroller-repeat="item in items | filter:idOver500k | orderBy:predicate:!reverse">
<li class="item">{{item.text}}</li>
</ul>
</div>
滚动没有过滤器和orderBy,但我正在寻找一种能够处理所有情况的方法。
加载页面至少需要3秒才能删除图像。看起来只有在获得所有图像时才加载角度。处理这个问题的最佳方法是什么?
谢谢!
答案 0 :(得分:8)
使用 ng-infinite-scroll 进行演示:http://plnkr.co/edit/O5w0Fp
ng-infinite-scroll 与 ng-scroller 具有不同的机制。当用户滚动到底部时,无限滚动将触发loadMore
功能。您可以自己定义loadMore
功能。
我创建了一个lazyLoad
过滤器,仅返回由counter
变量管理的部分过滤项目。滚动到底部时,counter
将加一,以便从lazyLoad
过滤器中返回更多项目。
当用户按参数更改订单时,counter
将重置为1.
当counter
等于1
时,它会加载前30个项目。
如果document.body
的高度小于window
的高度,则可能会出现问题,因为该方式文档无法滚动,因此不会触发scroll
事件。您必须手动检查高度并相应地触发loadMoreItems
。
页面初始化或counter
重置时会出现问题。
我在重置计数器后添加了adjustCounter
函数来运行。 ng-infinite-scroll 将在内部页面加载时处理此问题。
答案 1 :(得分:0)
在没有修复ngScroller的情况下,这似乎无法使用动态过滤器。
违规代码似乎在ng.Scroller.prototype.compile
函数中:
var exp = carousel.getAttribute('ng-scroller-repeat');
var keys = exp.split(/\s+in\s+/);
其中ngScroller基本上拆分属性而不查看过滤器等。
一个可能的解决方法就像@Daiwei建议并在绑定之前过滤。这不是一个糟糕的解决方案,因为无论如何这要快得多。
app.controller('MainController', function ($scope) {
$scope.allItems = generateItems(1000);
$scope.items = $scope.allItems.reduce(function(previous, item){
if (item.id > 500000)
{
previous.push(item);
}
return previous;
},[]);
});
有关示例,请参阅此Plunker。