前端问一个无限滚动加载的问题

2020 年 4 月 25 日
 chengxy

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

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

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

5949 次点击
所在节点    JavaScript
33 条回复
zhuowenli
2020 年 4 月 25 日
不要使用页码发请求,可以通过列表的最后一条数据的 id 作为请求参数。
maichael
2020 年 4 月 25 日
不重新获取数据,直接手动把删除的数据标记,根据数据显示该条数据
chengxy
2020 年 4 月 25 日
@zhuowenli #1 看来我得和后端商量商量了
chengxy
2020 年 4 月 25 日
@maichael #2 但是我要请求下一页的数据,没太理解,能详细说一下吗?
ariussssss37
2020 年 4 月 26 日
带 offset 条数请求,用 id 标志 去 diff
cc77
2020 年 4 月 26 日
能不能删除以后进行数据刷新
LG3xFA6kpn88HxEW
2020 年 4 月 26 日
最近我也同样遇到这种场景了,mark 一下,我暂时也还没解决
chengxy
2020 年 4 月 26 日
@ariussssss37 #5 看来还是要和后端商量了。
chengxy
2020 年 4 月 26 日
@rick2c #6 刷新后必须回到第一页了,不然数据会出现错误。
cc77
2020 年 4 月 26 日
@chengxy 只要判断当前页数据是否为空就行了,不知道你指的数据错误是?
LeeSeoung
2020 年 4 月 26 日
数据总条数有变更直接刷新表格回第一页
bzj
2020 年 4 月 26 日
一次性全部加载放到缓存中,从缓存取数据。
o0
2020 年 4 月 26 日
一般都是刷新一下数据,不过上面的思路都很好。
lihongming
2020 年 4 月 26 日
通过最后一条数据的 id 请求下一个数据+1

现在有的数据库(比如 AWS 的 DynamoDB )根本不支持 offset 了,只能通过最后一条 id 。

即使你用 MySQL 之类的支持 offset 的数据库,用 id>也比 offset 效率高很多,数据量小看不出来,你可以试试一亿条数据 offset1000 万,估计数据库直接挂了
chengxy
2020 年 4 月 26 日
@rick2c #10 我了解你的意思了,指的是把当前页的数据从数组中移除,然后请求当前页数据,重新添加回数组。
是这样吗?
chengxy
2020 年 4 月 26 日
@rick2c #10 这样有个问题,假如数组里已经有 5 页数据,每页 10 条,我删除了第 2 页的第 5 条,那这样返回的时候就要重新请求 4 页的数据了。
cc77
2020 年 4 月 26 日
@chengxy 是这样的,你的原问题是`再次去请求数据(下一页)`时出现少一条数据,这种情况刷新当前页面数据是必须的,如果你是已经做了数据缓存`假如数组里已经有 5 页数据`,这种情况当然不需要做数据刷新,直接数据重组就行了
chengxy
2020 年 4 月 26 日
@rick2c #17 嗯,我也只是举了一个情况。
yungo8
2020 年 4 月 26 日
如果是用户看的页面,
倒序查询,后台添加数据,也会有问题。
一般传最新加载的数据的最后一行的 id
create_date 都好像也可以。
dreasky
2020 年 4 月 26 日
参考 twitter 的 api 设计, 使用 since_id 和 max_id 来获取范围内的 list

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/666027

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX