fb-util 无限滚动中的 $key 问题

Posted

技术标签:

【中文标题】fb-util 无限滚动中的 $key 问题【英文标题】:Issue with $key in fb-util infinite scroll 【发布时间】:2017-05-05 10:11:25 【问题描述】:

我正在使用 fb-util 进行无限滚动,一切看起来都很好。但是,一旦我达到 250 个元素,我就会看到以下错误。知道这是什么意思吗?

错误:查询:按键排序时,您只能将一个参数传递给 startAt()、endAt() 或 equalTo()。在 Jh (https://www.gstatic.com/firebasejs/3.2.1/firebase.js:431:117) 在 X.g.Nd (https://www.gstatic.com/firebasejs/3.2.1/firebase.js:441:298) 在 r._grow (https:///content/script/firebase-util.min.js:10:8979) 在 r._listen (https:///content/script/firebase-util.min.js:10:10961) 在 r.goTo (https:///content/script/firebase-util.min.js:10:8062) 在 r.moveTo (https:///content/script/firebase-util.min.js:10:3672) 在 r.next (https:///content/script/firebase-util.min.js:10:17083) 在 https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:198:424 在 xa.(匿名函数) (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:59:133) 在 l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)

代码:

var baseRef = firebase.database().ref().child(refPath);
var scrollRef = new firebase.util.Scroll(baseRef, '$key');
scrollRef.scroll.next(25);
var list = $firebaseArray(scrollRef);
list.scroll = scrollRef.scroll;

前端代码:

<div infinite-scroll="vm.products.scroll.next(10)" infinite-scroll-distance="1">

nb:将密钥从 $key 更改为 $priority 或 name 或 productid,停止产生错误。但是,这会导致之前的元素被替换。

【问题讨论】:

【参考方案1】:

所以,虽然我对问题的第一部分没有答案,但根据附加说明,我有这个修复:

var scrollRef = new firebase.util.Scroll(baseRef, '$priority', maxCacheSize: 750, windowSize: 500);

将 maxCacheSize 和 windowSize 设置为更高的值应该可以解决问题。根据文档,如果我们超过 windowSize,那么数组的开头会被修剪以保持大小在限制之下。

文档:

Keys/values that can be passed via opts:

int windowSize: the maximum number of records to have loaded in the list at any given time. 3-5 times the size of the viewable window is a good optimization, depending on how fast content is scrolled and the payload of each record (i.e. how long it takes to download).
int maxCacheSize: in general, leave this as the default. This controls the internal cursor's cache, which is used to find the current position in the list. This controls how many keys it can load at any given time. This is, by default, three times the size of windowSize and should always be larger than windowSize.

【讨论】:

以上是关于fb-util 无限滚动中的 $key 问题的主要内容,如果未能解决你的问题,请参考以下文章

没有 .pushstate 的无限回滚按钮

使用 React JS 无限滚动

用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图

如何在 Flutter 中添加无限滚动?

Jetpack Compose 无限加载列表(滚到底部自动加载更多)

iOS UICollectionView无限轮播