保存滚动位置的实现方法
文章目录
- 前言
- 一、让路由保存滚动条的位置
- 二、创建方法监听滚动事件
- 三、页面进入活跃打开监听并滚动到记录位置
- 四、完善并优化
前言
有的时候从列表页面进入详情页面再返回列表页面，即使使用了keep-alive缓存列表页，也会导致列表页面你的滚动位置发生了变化。
这是由于两点问题造成的：
- 两个页面高度不一致导致页面跳转的时候滚动条位置发生了改变；
- keep-alive不会缓存滚动条的位置。
为了解决这个问题我们需要手动的保存列表页面的滚动条位置，并再切换回列表页面的时候滚动到保存的位置。
提示：以下是本篇文章正文内容，下面案例可供参考
一、让路由保存滚动条的位置
{
name: 'home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页',
keepAlive: true,
scrollTop: 0,
},
},
二、创建方法监听滚动事件
methods: {
// 记录滚动距离
scrollEvent() {
this.$route.meta.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop
},
},
三、页面进入活跃打开监听并滚动到记录位置
activated() {
// 开启对于滚动事件的监听，需要要创建一个方法，以便销毁
window.addEventListener('scroll', this.scrollEvent)
// 页面进入活跃的时候滚动到保存的位置
document.documentElement.scrollTop = this.$route.meta.scrollTop
document.body.scrollTop = this.$route.meta.scrollTop
},
四、完善并优化
beforeRouteLeave(to, from, next) {
// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
window.removeEventListener('scroll', this.scrollEvent)
next()
},
activated() {
// 开启对于滚动事件的监听，需要要创建一个方法，以便销毁
window.addEventListener('scroll', this.scrollEvent)
// 页面进入活跃的时候滚动到保存的位置
document.documentElement.scrollTop = this.$route.meta.scrollTop
document.body.scrollTop = this.$route.meta.scrollTop
},
methods: {
// 记录滚动距离
scrollEvent() {
this.$route.meta.scrollTop =
document.documentElement.scrollTop || document.body.scrollTop
},
},
PS：也可以在离开页面的时候保存滚动条的位置，但是博主在使用过程中发生过离开页面不记录的情况，所以使用了监听事件