【问题记录】分页加载/上拉加载列表，删除某条数据

【问题记录】分页加载/上拉加载列表，删除某条数据

• 举例

  库里有9条数据，每次分页加载3条数据. 正常加载如图所示.

• 问题现象： 当加载到完第2页的时候，删除了第5条数据。再次下拉。 第三页的数据为 8、9. 这个时候发现 数据7 丢了，页面展示为 1、2、3、4、6、8、9 。

• 解决方案

  删除第5条后，重新请求第二页数据，如果第三页数据已经加载出来、可以从现有list中删掉

• 优点

  1、不需要重新刷新整页列表
  2、用户体验效果较好、视口所在位置不会变化、用户感知很小（数据是在新数据返回之后进行替换的，因此不会频繁造成页面重绘）

• 缺点

  该页之后的数据会被刷丢。
  但是我认为这不是什么大问题，如果你需要，计算一下删除时页面加载到的总页数，然后轮询加载。

伪代码

const list = [];
const state = {
  replace: false,
  list: [],
  total: 0,
  pageIndex: 0,
  pageSize: 3
}
async function loadList() {
  const result = await request({
    pageIndex: ++state.pageIndex,
    pageSize: state.pageSize
  });
  state.total = result.total;
  if (state.replace) {
    // 删除页面中上一页之后的数据 与 新数据拼接
    const prevList = state.list.slice(0, state.pageIndex * state.pageSize);
    this.list = prevList.concat(result.data);
  } else {
    state.list.push(...result.data);
  }
}

async function delete(data, index) {
  // 删除数据
  await deleteRequest({id: data.id});
  // index 表示删除的第N条数据
  // 重置页数为当前删除数据所在位置的上一页
  state.pageIndex = Math.floor(index / state.pageSize);
  // 重新请求该页数据
  state.replace = true;
  await loadList();
  // 替换完成
  state.replace = false;
}