列表滚到第八屏点进详情,返回时先回到原位再被顶回顶部,肉眼能看到一次跳动,第三次之后干脆都停在顶部。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,savedPosition 恢复的那一刻列表数据还没回来,容器高度只有几百像素,滚动位置被浏览器截断。数据渲染完高度变了,滚动范围重新计算,位置就丢了。
「异步列表滚动恢复」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
onActivated(() => {
if (savedTop) nextTick(() => window.scrollTo(0, savedTop))
})
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
具体做法是,先把 savedPosition 存下来,列表渲染完成后再 scrollTo,别在路由钩子里直接滚;给列表容器设 min-height,占位高度接近真实内容,恢复时不会被截断;恢复只做一次并加标记,否则分页加载会反复触发回顶。
最后用这个标准收尾,返回列表直接停在原来那条,看不到回顶的闪动。
