2
我有一个要求,我想要显示一个列表中的前10个条目,并且一旦用户向下滚动,我想追加下10个条目。我目前使用的是Angularfire,所有文档都指定我不应该对$ FirebaseArray进行数组操作:Firebase - 懒加载数据列表
不应该直接操纵此数组。诸如splice(),push(),pop()和unshift()等方法将导致数据与服务器不同步。
所以我的选择是加载下一个10项和:
- 使用$的add(),这将再次将它们写入服务器(认为这可能会导致一些讨厌的递归)
- 使用concat,在这种情况下,我的数据将与服务器不同步
- 再次获取列表,但将限制调整为20,我认为这会导致重新加载所有数据,从而导致延迟加载的目的。
这里是最初加载列表(基于Angularfire种子应用程序)代码:
var lastKey = null;
var firstKey = null;
$scope.messages = fbutil.syncArray(userMessages,{'limit':10});
$scope.messages.$loaded(function(data){
lastKey = data.$keyAt(data.length-1);
firstKey = data.$keyAt(0);
});
这里是触发代码,当用户向下滚动:
$document.on('scroll', function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
var newMessages = fbutil.syncArray(messagePath,{'limit':10,'startAt':lastKey});
newMessages.$loaded(function(data){
lastKey = data.$keyAt(data.length-1);
firstKey = data.$keyAt(0);
$scope.messages.concat(newMessages);// this is probably a bad idea
});
}
});
如果您继续阅读AngularFire文档页面上(https://www.firebase.com/docs/web/libraries/angular/quickstart.html) ,你会看到:“相反,AngularFire提供了一系列与操作同步数组兼容的方法:$ add(),$ save()和$ remove()。”这就是你添加/删除项目的方式。但是实现无限滚动列表并没有像那样记录。你已经开始实施它了吗? – 2014-09-23 16:58:53
另请参阅加藤的这篇博客文章:https://www.firebase.com/blog/2013-10-01-queries-part-one.html#paginate。它演示了如何做分页,这基本上是你打算如何实现按需加载。 – 2014-09-23 17:31:01
@Frank van Puffelen我以前看过加藤的分页示例,但用例略有不同。在分页中,用新列表替换现有列表。我需要做的是在当前列表中添加下10个条目。然而,如果我使用$ add(),接下来的10个条目将被添加到当前列表的本地和服务器上,如果我使用concat(),那么我冒着数据与服务器不同步的风险。 – Ren 2014-09-24 06:26:30