本文共 3407 字,大约阅读时间需要 11 分钟。
最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。
这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上,便于继续浏览。
于是在网上搜解决方法,搜了一大圈看了 n 篇文章,都没有说清楚。起码我是没有通过看一篇文章而完美解决,所以决定写一篇详细的亲测可行的解决方案。
一共分三步:
项目地址:
100
多位经验丰富的开发者参与,在 Github 上获得了1000+
个star
的全栈全平台开源项目想了解或参与吗?
先贴出 ,不熟悉的可以先看看文档。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。所以在由详情页返回列表页时,不让列表页刷新。
当组件在 <keep-alive>
内被切换,它的 activated
和 deactivated
这两个生命周期钩子函数将会被对应执行。
设置 scrollTop
时是在 activated
方法里,有些文章说获取 scrollTop
在 deactivated
方法里,但经过测试,在 deactivated
方法里并不能准确的获取 scrollTop
值,每次都是 0。具体原因暂时不深究,先解决问题。所以把获取 scrollTop
值放在 item 的点击事件函数里执行。
页面布局如下:
整个页面是一个 <rounter-view>
,下面又分了两个 tab,我们列表页是一个组件,位于 title 和 导航栏之间的区域。
布局代码:
我是标题 { {item}}
用到了 的下拉刷新和上拉加载更多组件。
可以看到我一共给了四个 ref
,分别是最外层的 ref="list"
,下拉刷新组件 van-pull-refresh
的 ref="pullRefresh"
,列表组件 van-list
的 ref="list"
,和每个 item 的 ref="item"
。
为什么给出这么多呢?因为这里有个大坑,也是我一直卡住的地方。
我们知道获取滚动位置是用 scrollTop
这个属性,下面我们就依次打印出这几个元素的 scrollTop
。
clickItem(item) { let wrapperScrollTop = this.$refs.wrapper.scrollTop; let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop; let listScrollTop = this.$refs.list.scrollTop; let itemScrollTop = this.$refs.item.scrollTop; console.log('wrapperScrollTop', wrapperScrollTop); console.log('pullRefreshScrollTop', pullRefreshScrollTop); console.log('listScrollTop', listScrollTop); console.log('itemScrollTop', itemScrollTop); this.$router.push({ name: "detail", params: { data: item}})},
放到 item 的点击事件里触发。得到的日志如下:
WTF?只有第一个 wrapperScrollTop
有值,其他的都 undefined
!
我也不知道为啥,之前一直是获取后三者的 scrollTop
,一直获取不到,纠结了好久。为什么其他三个获取不到我现在还没整明白,知道原因的大佬可以指点一下。
知道了该获取哪一个元素的 scrollTop
就简单了,得到值只需存储起来即可。
因为使用了 keep-alive
,页面被缓存起来了,所以 data
里的数据不会丢失,可以在 data
中声明一个变量 scroll
存储 scrollTop
的值。也可以使用 。
修改下 clickItem(item)
的代码,将 scrollTop
的值存储起来。
clickItem(item) { let wrapperScrollTop = this.$refs.wrapper.scrollTop; let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop; let listScrollTop = this.$refs.list.scrollTop; let itemScrollTop = this.$refs.item.scrollTop; console.log('wrapperScrollTop', wrapperScrollTop); console.log('pullRefreshScrollTop', pullRefreshScrollTop); console.log('listScrollTop', listScrollTop); console.log('itemScrollTop', itemScrollTop); //存储 scrollTop 的值 this.scroll = wrapperScrollTop; this.$router.push({ name: "detail", params: { data: item}})},
上面已经介绍过了,使用 keep-alive
之后,每次返回页面会调用 activated
生命周期方法,所以在这个方法里设置之前记住的 scrollTop
,达到记住滚动位置的效果。
代码很简单,只有一句话:
activated() { this.$refs.wrapper.scrollTop = this.scroll}
完整的代码如下:
我是标题 { {item}}
好了,以上就是 Vue 返回记住滚动条位置的详解。
CodeRiver 是一个免费的项目协作平台,愿景是打通 IT 产业上下游,无论你是产品经理、设计师、程序员或是测试,还是其他行业人员,只要有好的创意、想法,都可以来 CodeRiver 免费发布项目,召集志同道合的队友一起将梦想变为现实!
CodeRiver 本身还是一个大型开源项目,致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈,主打代码质量。
目前已经有近 100
名优秀开发者参与,github 上的 star
数量将近 1000
个。每个技术栈都有多位经验丰富的大佬坐镇,更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平,相信都能在这里学有所获。
通过 高质量源码 + 博客 + 视频
,帮助每一位开发者快速成长。
项目地址:
您的鼓励是我们前行最大的动力,欢迎点赞,欢迎送小星星✨ ~
转载地址:http://itvpi.baihongyu.com/