如何使用Ionic无限滚动实现PouchDB分页？

我来帮你搞定这个分页重复加载的问题！你的思路是对的，但代码里有几个关键错误导致每次都拿到前15个文档，同时还要注意文档ID字符串排序的隐藏坑，我一步步给你讲清楚：

首先，修正你原代码里的错误点 #

1. 错误访问响应对象：PouchDB的allDocs返回的是一个包含rows数组的对象，不是直接的数组！你原来写的response[response.length - 1]完全不对，应该取response.rows[response.rows.length - 1]来拿到最后一条结果。
2. 多余的skip参数误用：当你设置startkey为下一页的起始ID时，直接设置skip:1会跳过本该获取的第一个文档；正确的做法是用上一页最后一个ID作为startkey，再通过skip:1跳过这个已加载的文档，避免重复。
3. 文档ID排序的隐藏坑：你的文档ID是doc-1、doc-2...doc-100，字符串排序会把doc-10排在doc-2前面（因为字符串比较是按字符逐个匹配的），这会导致分页顺序完全错乱！这个问题必须解决，否则分页逻辑根本不成立。

方案一：修改文档ID格式（最简单的排序解决方法） #

如果可以修改文档ID，把数字部分补上前导零，比如doc-001、doc-002...doc-100，这样字符串排序就会和数字顺序一致。然后用下面的修正代码实现分页：

// 初始化分页状态
let lastDocId = null;
const pageSize = 15;

// 首次加载第一页
function fetchFirstPage() {
  const options = {
    limit: pageSize,
    include_docs: true // 需要完整文档就设为true，只需要ID设为false
  };

  pouch.allDocs(options, (err, response) => {
    if (err) {
      console.error('加载第一页失败:', err);
      return;
    }

    if (response.rows.length > 0) {
      // 记录最后一个文档的ID
      lastDocId = response.rows[response.rows.length - 1].id;
      // 渲染文档到页面（替换成你的渲染逻辑）
      renderDocs(response.rows.map(row => row.doc));
    } else {
      console.log('暂无文档');
    }
  });
}

// 加载下一页
function fetchNextPage() {
  if (!lastDocId) {
    // 还没加载过第一页，先加载
    fetchFirstPage();
    return;
  }

  const options = {
    limit: pageSize,
    startkey: lastDocId,
    skip: 1, // 跳过已经加载过的最后一个文档
    include_docs: true
  };

  pouch.allDocs(options, (err, response) => {
    if (err) {
      console.error('加载下一页失败:', err);
      return;
    }

    if (response.rows.length > 0) {
      // 更新最后一个文档的ID
      lastDocId = response.rows[response.rows.length - 1].id;
      renderDocs(response.rows.map(row => row.doc));
    } else {
      console.log('已加载全部文档');
      // 这里可以禁用无限滚动触发事件，比如解绑scroll监听
      disableInfiniteScroll();
    }
  });
}

方案二：使用自定义索引排序（不修改文档ID） #

如果不能修改文档ID，给每个文档添加一个number字段（值为对应数字1、2...100），然后创建索引来按数字排序：

第一步：创建索引 #

// 确保索引创建成功后再进行查询
pouch.createIndex({
  index: {
    fields: ['number']
  }
}).then(() => {
  console.log('索引创建成功');
  // 初始化加载第一页
  fetchFirstPage();
}).catch(err => {
  console.error('创建索引失败:', err);
});

第二步：基于索引实现分页 #

let lastDocNumber = null;
const pageSize = 15;

function fetchFirstPage() {
  pouch.find({
    selector: { number: { $gte: 1 } },
    sort: [{ number: 'asc' }],
    limit: pageSize
  }).then(response => {
    if (response.docs.length > 0) {
      lastDocNumber = response.docs[response.docs.length - 1].number;
      renderDocs(response.docs);
    } else {
      console.log('暂无文档');
    }
  }).catch(err => {
    console.error('加载第一页失败:', err);
  });
}

function fetchNextPage() {
  if (!lastDocNumber) {
    fetchFirstPage();
    return;
  }

  pouch.find({
    selector: { number: { $gt: lastDocNumber } },
    sort: [{ number: 'asc' }],
    limit: pageSize
  }).then(response => {
    if (response.docs.length > 0) {
      lastDocNumber = response.docs[response.docs.length - 1].number;
      renderDocs(response.docs);
    } else {
      console.log('已加载全部文档');
      disableInfiniteScroll();
    }
  }).catch(err => {
    console.error('加载下一页失败:', err);
  });
}

这样就能保证分页完全按照数字顺序加载，不会出现乱序的问题。

最后补充 #

• 记得实现renderDocs函数来处理文档的渲染逻辑，把新加载的文档追加到页面上，而不是替换掉之前的内容。
• 实现disableInfiniteScroll函数，当没有更多文档时，解绑滚动事件监听，避免不必要的请求。

内容的提问来源于stack exchange，提问作者dyrnjrdz