Vue,使用vant-list组件时,如何在点击列表进入详情页之后返回还是在原来的位置?

发布于 2022-09-12 13:52:10 字数 454 浏览 10 评论 0

其实目前标题的效果默认是能实现的

但有一个问题就是,vant-list组件是可以下拉滚动加载下一页的

如果我一开始点击的那一行不是在第一页,而是在第N页的话
此时点击进入详情页,再按返回键,会先触发重新请求,然后滚动加载到点击那一行的那一页

(视觉效果就是,点击返回的时候,列表会一直滚动并触发加载,一直到之前的那一行)

这个效果很糟糕

有办法让它再第N页返回的时候,直接默认缓存之前已经加载的吗?

上两个动图说明下

【第一页点击返回】
第一页点击返回

【第N页点击返回,会先触发滚动】

image

目前的述求就是:希望第N页返回的时候能不要触发那个滚动,而且直接回到默认的位置

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

卸妝后依然美 2022-09-19 13:52:10

详情做成弹窗或列表做缓存试试;

尽揽少女心 2022-09-19 13:52:10

你的详情页写成列表页的子路由不就好了

那一片橙海, 2022-09-19 13:52:10

单页应用可以考虑楼上的方案.
多页的话,可以把列表数据缓存到sessionStorage,加载列表时,检查缓存,有则直接取出缓存渲染.

忆离笙 2022-09-19 13:52:10

你可以尝试楼上说的 sessionStorage 方案,这个特点是在你开启网页的时候,这个缓存会一直在。

也可以尝试 performance.navigation.type 来区分是 刷新、打开、前进后退

单页应用的话,直接缓存组件,应该就能实现。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文