最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。
这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上,便于继续浏览。
于是在网上搜解决方法,搜了一大圈看了 n 篇文章,都没有说清楚。起码我是没有通过看一篇文章而完美解决,所以决定写一篇详细的亲测可行的解决方案。
一共分三步:
给 router-view 添加 keep-alive
获取并存储当前 scrollTop
返回时取出并设置 scrollTop
100 多位经验丰富的开发者参与,在 Github 上获得了 1000+ 个 star 的全栈全平台开源项目想了解或参与吗?
项目地址:https://github.com/cachecats/coderiver
一、给 router-view 添加 keep-alive
先贴出 keep-alive 官方文档,不熟悉的可以先看看文档。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。所以在由详情页返回列表页时,不让列表页刷新。
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
设置 scrollTop 时是在 activated 方法里,有些文章说获取 scrollTop 在 deactivated 方法里,但经过测试,在 deactivated 方法里并不能准确的获取 scrollTop 值,每次都是 0。具体原因暂时不深究,先解决问题。所以把获取 scrollTop 值放在 item 的点击事件函数里执行。
二、获取并存储当前 scrollTop
页面布局如下:
image
整个页面是一个 ,下面又分了两个 tab,我们列表页是一个组件,位于 title 和 导航栏之间的区域。
布局代码:
ref="list"
class="list"
v-model="loadingMore"
:finished="finished"
finished-text="没有更多了"
@load="onLoadMore"
>