Vue返回记住滚动条位置
vue 项目返回上一页，滚动到离开时的位置，网上能找到不少方法，以下尝试一种。
一共分三步：
给 router-view 添加 keep-alive
获取并存储当前 scrollTop
返回时取出并设置 scrollTop
例如，首页有个列表，点击列表进入二级页面，返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = 'Home' 的组件进行缓存，当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
<keep-alive include='Home'>
<router-view/>
</keep-alive>
然后，在首页的 Home 组件内，使用 beforeRouteLeave ，组件内的路由导航守卫，路由离开前，获取滚动高度，并记录在 data 中，当再次进入首页，判断是否存在这个滚动高度，若存在，则设置高度，否则置为 0
data:{
homeTop : 0,
},
activated(){
// do something
console.log('activated home')
document.getElementById('app').scrollTop = this.homeTop || 0
},
beforeRouteLeave (to, from, next) {
// console.log('leave')
let app = document.getElementById('app')
this.homeTop = app.scrollTop || 0
next()
},
移动端
页面布局如下：
image.png
整个页面是一个 <rounter-view> ，下面又分了两个 tab，我们列表页是一个组件，位于 title 和 导航栏之间的区域。
布局代码：
<div class="wrapper" ref="wrapper">
<div class="title">我是标题</div>
<van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
<van-list
ref="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 。
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}})
},
image.png
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;
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}})
},
三、返回时取出并设置 scrollTop
上面已经介绍过了，使用 keep-alive 之后，每次返回页面会调用 activated 生命周期方法，所以在这个方法里设置之前记住的 scrollTop，达到记住滚动位置的效果。
代码很简单，只有一句话：
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-list
ref="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>
<script>
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>
<style scoped lang="scss">
@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);
}
.list {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
.item-wrapper {
display: flex;
flex-direction: column;
font-size: px2rem(16);
margin: px2rem(8);
padding: px2rem(8);
background-color: white;
.item {
font-size: px2rem(16);
padding: px2rem(10);
}
}
}
}
</style>
好了，以上就是 Vue 返回记住滚动条位置的详解。
原文链接：https://blog.csdn.net/solocoder/article/details/88124264
网友评论