场景: 移动端列表页面使用隐藏分页,即往上划动屏幕时自动加载下一页,列表项可以点击进入子页面,从子页面可以后退回列表页面。 目前没有记录点击的列表项定位,就导致每次从子页面返回列表页面时都会回到列表顶部,体验很不好。
问题: 如果在列表项点击时缓存了列表数据并记录下当前定位可以在子页面返回时恢复,但是会有一种情况就是子页面有操作按钮,比如编辑,提交,删除等。在操作之后会对列表数据产生影响,这种时候如果使用缓存的数据就会出现不一致的情况。想请教大家通常是怎么处理的?
1
geist 2022-02-18 21:03:21 +08:00
如果你正在使用框架,那么保持原来的路由 keep-alive 就可以。(具体不同可以去搜解决方案),如果滚动内容较多,可以尝试和 [虚拟滚动]( https://github.com/react-component/virtual-list) 结合。
至于回来时数据发生了变化有很多解决方案,你可以用网络请求、url 传递参数、组件内部内存交互,借助浏览器平台交互等各种方式完成 re-validate ,以剔除不需要的数据。 |