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

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

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

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

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

这个效果很糟糕

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

上两个动图说明下

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

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

image

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

回答:

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

回答:

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

回答:

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

回答:

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

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注