V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gibber
V2EX  ›  程序员

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

  •  
  •   gibber · 2022-02-17 22:12:24 +08:00 · 1306 次点击
    这是一个创建于 1004 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    - 产品上:你可以埋点看看返回列表后下滑的用户比例多不多,如果对于你的业务来说这是一个常见的用户行为,那推荐做一下。
    - 技术上:数据变化的处理不难,加起来未必会超过一个组件的长度,肯定是处理会更好。
    gibber
        4
    gibber  
    OP
       2022-02-19 15:56:34 +08:00
    @geist 感谢解答
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2858 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 14:31 · PVG 22:31 · LAX 06:31 · JFK 09:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.