vue页面中的一部分列表滚动条，在跳转页面后再回来，保持之前滚动条的位置状态

最新推荐文章于 2022-08-09 16:20:04 发布

addU

最新推荐文章于 2022-08-09 16:20:04 发布

阅读量1k

点赞数 1

分类专栏： Vue web 文章标签： vue.js

本文链接：https://blog.csdn.net/flyinglf/article/details/123250499

版权

Vue 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

web

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中实现路由切换时的滚动位置保存和恢复。通过在`beforeRouteLeave`和`beforeRouteEnter`钩子函数中处理滚动位置，确保页面在进入和离开时平滑过渡。同时，为了解决页面渲染延迟问题，使用了setTimeout进行延迟操作。

摘要由CSDN通过智能技术生成

类似下面的效果：
在这里插入图片描述
代码实现：

beforeRouteLeave(to, from, next) { // main是包含列表的盒子容器类名
    this.scrollTop = document.querySelector('.main').scrollTop
    next()
  },
beforeRouteEnter(to, from, next) {
    next(vm => {
      setTimeout(() => {//一开始进来页面未渲染无法拿到元素进行scrollTop的设置，所以用了延时函数
        document.querySelector('.main').scrollTop = vm.scrollTop
      }, 800)
    })
},