0

采用一个窗口虚拟列表，该列表能够在列表中的任何点加载任意范围的行，例如以下示例。

虚拟列表提供了一个回调，当用户滚动到一些尚未从后端获取的行时调用该回调，并提供开始和停止索引，以便在基于偏移量的分页端点中，我可以获取所需的项目无需获取任何不必要的数据。

const loadMoreItems = (startIndex, stopIndex) => {
  fetch(`/items?offset=${startIndex}&limit=${stopIndex - startIndex}`);
}

我想用基于光标的分页替换基于偏移的分页，但我不知道如何用它重现上述逻辑。

主要问题是我觉得我需要先下载所有项目才能startIndex接收获取 startIndex 和 stopIndex 之间项目所需的光标。

解决这个问题的正确方法是什么？

4

1 回答 1

0

经过一番调查，我发现 MongoDB 解决问题的方式似乎是：

https://docs.mongodb.com/manual/reference/method/cursor.skip/#mongodb-method-cursor.skip

显然，任何其他后端实现都可以采用相同的方法。

它们提供了一种skip方法，允许在提供的光标之后跳过任意数量的项目。

这意味着我的示例端点如下所示：

/items?cursor=${cursor}&skip=${skip}&limit=${stopIndex - startIndex}

然后我需要弄清楚cursor和skip值。

鉴于我将它们与项目一起存储，以下代码可以找到最近的可用光标：

// Limit our search only to items before startIndex
const fragment = items.slice(0, startIndex);
// Find the closest cursor index
const cursorIndex = fragment.length - 1 - fragment.reverse().findIndex(item => item.cursor != null);
// Get the cursor
const cursor = items[cursorIndex];

当然，我也有办法知道skip值：

const skip = items.length - 1 - cursorIndex;
于 2021-07-23T12:57:25.033 回答