Firebase - 懒加载数据列表

我有一个要求，我想要显示一个列表中的前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 
    }); 
    } 
});

来源

2014-09-23 Ren

如果您继续阅读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

根据Kato的评论，以下是给出当前API的最佳解决方案。

var limit= 10; 
$scope.messages = fbutil.syncArray(messagePath,{'limit':limit});

和滚动触发

$document.on('scroll', function() { 
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
    limit += 10; 
    $scope.messages = fbutil.syncArray(messagePath,{'limit':limit}); 
} 
});

来源

2014-09-25 07:42:32 Ren

Firebase - 懒加载数据列表

回答

相关问题