时间戳

首页 > 解决方案 > 无限列表和分页公式

javascript - 无限列表和分页公式

问题描述

我在 react-native 中完成了一些无限分页。每次当用户到达页面末尾时，新数据就会开始从服务器获取。

有一些参数应该与请求一起发送以获取正确的数据。

const data = { limit, offset };

limit变量确定需要加载多少项目。
offset表示从数据库中的哪一点需要查询它们

所以简单地说这就是页面的样子

第 1 页：

const limit = 10; // get 10 items 
const offset = 0; // start point

第2页：

const limit = 20; // get 20 items 
const offset = 10;

第 3 页：

const limit = 30; // get 30 items 
const offset = 30;

第 4 页：

const limit = 40; // get 40 items 
const offset = 60;

第 5 页：

const limit = 50; // get 50 items 
const offset = 100;

等等。

这就是我现在在我的代码中得到错误结果的样子。

const initialValue = 10;
const limit = initialValue * config.page;
const offset = initialValue * (config.page - 1);

达到预期结果的最佳方法是什么？

标签： javascriptreactjsreact-nativemath

解决方案

你还没有描述你得到什么“不正确的结果”，但它看起来是一个相当简单的错误。

你提到：

limit变量确定需要加载多少项目。

这是一种常见的做法。 limit基本上是页面大小，说“给我 X 项”。通常limit会保持不变，只会offset被计算。但是，您的代码会不断增加限制：

const limit = 10; // get 10 items
...
const limit = 20; // get 20 items
...
const limit = 30; // get 30 items 
...
const limit = 40; // get 40 items 
...
const limit = 50; // get 50 items

这基本上是在说“我已经滚动浏览了 10 个项目，现在获取接下来的 20 个。我已经滚动浏览了这些项目，再获取 30、40、50”——这不是一种常见的分页方法。

尝试将限制保持在10并且仅更改偏移量。在这种方法中，您的代码将（伪）说“在之后给我接下来的 10 项offset”，我怀疑这是您的意图。

推荐阅读