关于手机端列表页面操作定位的处理

2022-02-17 22:12:24 +08:00
 gibber

场景: 移动端列表页面使用隐藏分页,即往上划动屏幕时自动加载下一页,列表项可以点击进入子页面,从子页面可以后退回列表页面。 目前没有记录点击的列表项定位,就导致每次从子页面返回列表页面时都会回到列表顶部,体验很不好。

问题: 如果在列表项点击时缓存了列表数据并记录下当前定位可以在子页面返回时恢复,但是会有一种情况就是子页面有操作按钮,比如编辑,提交,删除等。在操作之后会对列表数据产生影响,这种时候如果使用缓存的数据就会出现不一致的情况。想请教大家通常是怎么处理的?

1114 次点击
所在节点    程序员
4 条回复
geist
2022-02-18 21:03:21 +08:00
如果你正在使用框架,那么保持原来的路由 keep-alive 就可以。(具体不同可以去搜解决方案),如果滚动内容较多,可以尝试和 [虚拟滚动]( https://github.com/react-component/virtual-list) 结合。
至于回来时数据发生了变化有很多解决方案,你可以用网络请求、url 传递参数、组件内部内存交互,借助浏览器平台交互等各种方式完成 re-validate ,以剔除不需要的数据。
gibber
2022-02-18 21:21:21 +08:00
@geist 主要是拿不准对于数据变化的处理究竟是更新好还是不去处理也行,想知道通常采用哪种方案
geist
2022-02-18 21:23:23 +08:00
@gibber

- 产品上:你可以埋点看看返回列表后下滑的用户比例多不多,如果对于你的业务来说这是一个常见的用户行为,那推荐做一下。
- 技术上:数据变化的处理不难,加起来未必会超过一个组件的长度,肯定是处理会更好。
gibber
2022-02-19 15:56:34 +08:00
@geist 感谢解答

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

https://www.v2ex.com/t/834639

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

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

© 2021 V2EX