h5列表里新增后如何不让页面跳动

Question

对于h5的长列表，每次触底加载10条数据，用户在第100条数据那点击了回复，如果刷新页面会让数据清空重置，用户也会因为刷新后列表只有第1页而回到顶部，又得触底10次才能滑到原来浏览的位置，这该怎么解决？

不仅如此，还要考虑到用户点击回复后，能继续对自己刚回复的消息进行点赞、回复、删除的操作

Answer 1

为了解决H5长列表数据和用户交互状态保持的问题，可以采取以下策略：

1、状态保持和恢复：

使用本地存储（如LocalStorage或IndexedDB）来保存用户当前的浏览位置和已加载的列表项。当用户回复后刷新页面，可以从存储中恢复这些信息，自动加载到相应的位置，并滚动到之前用户浏览的地方。
另一种方法是使用URL中的参数或浏览器的历史API（history.pushState）来存储当前的滚动位置和加载的页数。这样用户在刷新页面后，可以通过这些参数恢复之前的状态。
2、局部刷新：

尽可能避免全页面刷新。对于回复操作，可以使用Ajax或Fetch API进行异步数据提交，然后动态更新列表，而不需要刷新整个页面。
如果必须刷新页面来更新数据，可以在页面加载时检查本地存储或URL参数，以确定需要自动加载的数据量和滚动位置。
用户操作后的列表更新：

当用户进行回复、点赞或删除操作后，可以只更新涉及的列表项而不是整个列表。比如，用户回复一条消息后，可以在该消息下方添加回复内容；点赞或删除操作也只更新相关的项目，而不触发全列表刷新。
3、虚拟滚动：

对于非常长的列表，可以实现虚拟滚动（也称为窗口化或懒加载）。在这种方法中，只渲染可视区域内的列表项，当用户滚动列表时，动态加载和卸载列表项。这样可以提高性能并减少DOM操作的开销。
优化后端数据加载：

后端接口可以支持分页或游标基的数据加载，以便前端可以请求特定范围内的数据。这样用户在刷新页面后，前端可以根据之前保存的状态请求特定页面的数据，而不是从头开始。
4、UI提示和交互优化：

提供清晰的UI提示，告知用户数据正在加载，以及保持加载状态的图标或动画，改善用户体验。
允许用户通过导航控件快速跳转到列表的特定部分，减少滚动操作。