移动端webapp怎么实现在上拉加载的列表页面进入详情返回后,列表页还是在之前的位置?

移动端webapp怎么实现在上拉加载的列表页面进入详情返回后,列表页还是在之前的位置?

    我现在是使用的一个全屏弹出代替的详情页直接覆盖在列表页上,返回的时候关闭弹出,页面还在之前的位置,尴尬的是在详情页不能刷新,一旦刷新就露馅儿了……
    网上还有一些办法是说将数据存到local storage里面,返回的时候从中加载渲染,但是感觉不够优雅。
    访问了饿了么的公众号页面,发现他们的列表页和详情页处理的很优雅,不知道有没有大神知道是怎么处理的。

饿了么地址

阅读 5.1k
5 个回答

考虑sessionStorage储存下top值,然后页面加载的时候设置下试试。

如果你用的vue,那么我知道vue router可以直接配置这个功能 滚动行为

首先 饿了吗不是用弹层覆盖的方式的 第二 我刚用tool 看了一下 饿了吗在进入详情的时候是缓存了scrollY这个字段。所以,按照一楼的方式是没问题的,还有你说的上拉加载,加载的时候应该清理缓存,并且滚动到顶部,或许你们的需求有点无理,但是也不是没办法解决,每一个list.item都有唯一id(没有的话问后端要就可以了),刷新之后去遍历id 取出 el节点。节点里面再重新获取scrollY,再滚动即可
clipboard.png

就是个存储位置,加载页面的时候判断是否有存储的位置有的话就scrollTo

直接使用标签

<keep-alive></keep-alive>

将router-view包裹住即可

eg:

<keep-alive>
    <router-view></router-view>
</keep-alive>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题