Question

我有一个要求，我要显示列表中的前10个条目，一旦用户向下滚动，我想追加下10个条目。我目前正在使用Angularfire，所有文档都指定我不应该对$ FirebaseArray进行数组操作：

不应直接操作此数组。 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
    });
  }
});

Answer 1

根据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});
 }
});

Firebase - 延迟加载数据列表

1 个答案: