300字范文 > Vue 详情返回列表页记住滚动条位置详情

Vue 详情返回列表页记住滚动条位置详情

时间：2020-06-22 22:43:08

原文章（/solocoder/article/details/88124264）

最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。

这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。

于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。

一共分三步：

给 router-view 添加 keep-alive获取并存储当前 scrollTop返回时取出并设置 scrollTop

100多位经验丰富的开发者参与，在 Github 上获得了1000+个star的全栈全平台开源项目想了解或参与吗？
项目地址：/cachecats/coderiver

一、给 router-view 添加 keep-alive

先贴出 keep-alive 官方文档，不熟悉的可以先看看文档。

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。所以在由详情页返回列表页时，不让列表页刷新。

当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

设置scrollTop时是在activated方法里，有些文章说获取scrollTop在deactivated方法里，但经过测试，在deactivated方法里并不能准确的获取scrollTop值，每次都是 0。具体原因暂时不深究，先解决问题。所以把获取scrollTop值放在 item 的点击事件函数里执行。

二、获取并存储当前 scrollTop

页面布局如下：

整个页面是一个<rounter-view>，下面又分了两个 tab，我们列表页是一个组件，位于 title 和导航栏之间的区域。

布局代码：

<div class="wrapper" ref="wrapper"><div class="title">我是标题</div><van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh"><van-listref="list"class="list"v-model="loadingMore":finished="finished"finished-text="没有更多了"@load="onLoadMore"><div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item"><div class="item">{{item}}</div></div></van-list></van-pull-refresh></div>

用到了 Vant-ui 的下拉刷新和上拉加载更多组件。

可以看到我一共给了四个ref，分别是最外层的ref="list"，下拉刷新组件van-pull-refresh的ref="pullRefresh"，列表组件van-list的ref="list"，和每个 item 的ref="item"。

为什么给出这么多呢？因为这里有个大坑，也是我一直卡住的地方。

我们知道获取滚动位置是用scrollTop这个属性，下面我们就依次打印出这几个元素的scrollTop。

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'wrapperScrollTop'</span><span class="token punctuation">,</span> wrapperScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'pullRefreshScrollTop'</span><span class="token punctuation">,</span> pullRefreshScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'listScrollTop'</span><span class="token punctuation">,</span> listScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'itemScrollTop'</span><span class="token punctuation">,</span> itemScrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">"detail"</span><span class="token punctuation">,</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> item<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

放到 item 的点击事件里触发。得到的日志如下：

WTF？只有第一个wrapperScrollTop有值，其他的都undefined！

我也不知道为啥，之前一直是获取后三者的scrollTop，一直获取不到，纠结了好久。为什么其他三个获取不到我现在还没整明白，知道原因的大佬可以指点一下。

知道了该获取哪一个元素的scrollTop就简单了，得到值只需存储起来即可。

因为使用了keep-alive，页面被缓存起来了，所以data里的数据不会丢失，可以在data中声明一个变量scroll存储scrollTop的值。也可以使用 Vuex。

修改下clickItem(item)的代码，将scrollTop的值存储起来。

clickItem(item) {let wrapperScrollTop = this.$refs.wrapper.scrollTop;let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;let listScrollTop = this.$refs.list.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}})},

三、返回时取出并设置 scrollTop

上面已经介绍过了，使用keep-alive之后，每次返回页面会调用activated生命周期方法，所以在这个方法里设置之前记住的scrollTop，达到记住滚动位置的效果。

代码很简单，只有一句话：

activated() {this.$refs.wrapper.scrollTop = this.scroll}

完整的代码如下：

<template><div class="wrapper" ref="wrapper"><div class="title">我是标题</div><van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh"><van-listref="list"class="list"v-model="loadingMore":finished="finished"finished-text="没有更多了"@load="onLoadMore"><div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item"><div class="item">{{item}}</div></div></van-list></van-pull-refresh></div></template>

export default {

components: {},created() {},mounted() {for (let i = 0; i < 15; i++) {this.list.push(i)}},data() {return {list: [], //列表数据loadingMore: false, //加载更多是否显示加载中finished: false, //加载是否已经没有更多数据isRefresh: false, //是否下拉刷新scroll: 0,}},activated() {this.$refs.wrapper.scrollTop = this.scroll},deactivated() {},methods: {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.scroll = wrapperScrollTop;this.$router.push({name: "detail", params: {data: item}})},onRefresh() {this.list = [];this.finished = false;setTimeout(() => {for (let i = 0; i < 15; i++) {this.list.push(i)}this.isRefresh = false}, 2000)},//加载更多onLoadMore() {console.log('load more')let newList = [];for (let i = this.list.length; i < this.list.length + 15; i++) {newList.push(i)}this.list = this.list.concat(newList)this.loadingMore = false;if (this.list.length > 50) {this.finished = true}},}

}

</script>

@import “…/…/public/css/index”;

.wrapper {

width: 100%;

height: calc(100vh - 100px);

overflow-x: hidden;

box-sizing: border-box;

margin-bottom: px2rem(50);

.title{

font-size: px2rem(20);

padding: px2rem(10);