技术解析

前端问一个无限滚动加载的问题
0
2021-08-17 23:29:06
idczone

程序背景:主界面是一个可下拉无限加载的列表,辅助页面是对列表项做操作。

需求:在辅助页面删除数据后,回到主界面,主界面同时删除数据。

问题:当我删除了某条数据后再次去请求数据(下一页),这时后因为服务器文件少了一条,假如和正常一样发送请求( page * pageSize ),会少一条,怎么解决?


不要使用页码发请求,可以通过列表的最后一条数据的 id 作为请求参数。

不重新获取数据,直接手动把删除的数据标记,根据数据显示该条数据

看来我得和后端商量商量了

但是我要请求下一页的数据,没太理解,能详细说一下吗?

带 offset 条数请求,用 id 标志 去 diff

能不能删除以后进行数据刷新

最近我也同样遇到这种场景了,mark 一下,我暂时也还没解决

看来还是要和后端商量了。

刷新后必须回到第一页了,不然数据会出现错误。

只要判断当前页数据是否为空就行了,不知道你指的数据错误是?

数据总条数有变更直接刷新表格回第一页

一次性全部加载放到缓存中,从缓存取数据。

一般都是刷新一下数据,不过上面的思路都很好。

通过最后一条数据的 id 请求下一个数据+1
现在有的数据库(比如 AWS 的 DynamoDB )根本不支持 offset 了,只能通过最后一条 id 。
即使你用 MySQL 之类的支持 offset 的数据库,用 id>也比 offset 效率高很多,数据量小看不出来,你可以试试一亿条数据 offset1000 万,估计数据库直接挂了

我了解你的意思了,指的是把当前页的数据从数组中移除,然后请求当前页数据,重新添加回数组。
是这样吗?

这样有个问题,假如数组里已经有 5 页数据,每页 10 条,我删除了第 2 页的第 5 条,那这样返回的时候就要重新请求 4 页的数据了。

是这样的,你的原问题是`再次去请求数据(下一页)`时出现少一条数据,这种情况刷新当前页面数据是必须的,如果你是已经做了数据缓存`假如数组里已经有 5 页数据`,这种情况当然不需要做数据刷新,直接数据重组就行了

嗯,我也只是举了一个情况。

如果是用户看的页面,
倒序查询,后台添加数据,也会有问题。
一般传最新加载的数据的最后一行的 id
create_date 都好像也可以。

参考 twitter 的 api 设计, 使用 since_id 和 max_id 来获取范围内的 list

非广告, https://j4u.ink/iKVQQF 有无限下拉加载列表.. js 文件 https://j4u.ink/U3ZIXK

使用发布订阅模式,辅助页面发布一个事件,列表监听同一个事件

我们之前的一种做法是,不删除主页面的数据,通过 dispatch 一个事件将主页面中的那条数据标记为已删除,然后通过 UI 的方式告知用户这条被删掉了,不可操作。不知道你们能这样搞不。。

可以看一下 service worker

是不是可以这样,声明一个 deleteCount,每次有删除的时候 deleteCount+1,然后请求下一条分页的时候 offset 传本来应该传的 offset-deleteCount,请求成功后 deleteCount 重新置 0

后端改个毛,非常合理的设计,删除的时候你应该前端标记它让他不显示而已,页码还是正常的加载。
上拉刷新或者刷新的时候再取消标记

记得防止无限滚动的时候占位别丢了就行。

之前的做法都是返回后加载第一页的数据,看完你们的思路,觉得很好,就是不知道后端愿不愿意改

状态删除不就行了吗?

如果筛选条件的分页是不是就不能用 id 了

是指的不发送删除请求吗,用户关闭了页面怎么办?

置灰~

是的,只适合流式分页

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服