h5长列表处理列表项新增导致重复、删除导致丢失

---

背景

vue框架写的h5长列表项目，为了提高用户浏览的体验感，通常使用keepalive组件搭配滚动条scrollTo，实现用户从 长列表页 进入 详情页 再返回时，滚动条能滚动到之前的浏览位置，让用户能接着往下浏览。

这种方案不会出现返回上一页时，刷新页面导致用户回到顶部的情况

---

长列表无感新增

1.问题概述

用户进入详情页，进行了新增操作，当用户返回长列表时，下一页的数据重复出现。

2.示例重现

长列表已加载的第一页内容为：
20、19、18、17、16、15、14、13、12、11
第二页的期待内容为：
10、9、8、7、6、5、4、3、2、1

用户进入19的详情页，新增了一项21，数据库数据位置偏移，返回长列表页时，触底加载第二页的内容实际为：
11、10、9、8、7、6、5、4、3、2

将分页内容push到长列表会发现内容11重复出现

3.解决

后端：新增时后端返回新增对象，分页时后端忽视新增数据。

前端：加载下一页时，将21的id传入分页接口，意为忽视id为它的记录，再分页返回。这样会忽视21再分页，拿到10-1的分页数据。

长列表无感删除

1.问题概述

用户进入详情页，进行了删除操作，当用户返回长列表时，下一页的数据会遗漏。

2.示例重现

长列表已加载的第一页内容为：
20、19、18、17、16、15、14、13、12、11
第二页的期待内容为：
10、9、8、7、6、5、4、3、2、1

用户进入19的详情页，删除了一项15，数据库被更改，返回长列表页时，触底加载第二页的内容实际为：
9、8、7、6、5、4、3、2、1
将分页内容push到长列表会发现内容10被吞掉

3.解决

后端：分页时后端当作没删。

前端：判断15是否在已经展示的20-11长列表里。在的话加载下一页时，将15的id传入分页接口，意为当作这条删除的数据没被删除，再分页返回。这样15也会被查出来，填补了空位，下一页拿到10-1的分页数据。

多端并发

1.问题概述

用户A在访问页面时，其他用户对数据库进行操作，导致用户A访问的数据不是最新的。

2.示例重现

用户A 正在浏览页面，已加载的第一页内容为：
20、19、18、17、16、15、14、13、12、11
第二页的期待内容为：
10、9、8、7、6、5、4、3、2、1

同时用户B、用户C、用户D等人访问页面，并操作了数据库
用户A触底加载的第二页内容变得不可控

3.解决

前端：
当用户请求第一页数据时，不需要携带标记。
当用户请求下一页数据时，携带上一页数据中最后一条记录的标识符（ID 或时间戳）。

后端：
服务器接收请求时，检查携带的标记。
使用标记来查询数据库，只返回比标记更早的数据，以确保新数据不会被包含在已加载的数据中。

这方法没实践过，听着像用时间戳实现版本控制一样
（参考：https://www.51cto.com/article/654383.html?pc）