vue 跳转页面记录下滚动条的位置

[54xiaojuan]

跳转页面记录下滚动条的位置的流程是什么？有例子吗？

[jio可]

监听当前dom的滚动位置scrollTop，在Destory里面写入缓存。下次进入读取缓存滚动到上次的位置，没有缓存就默认最上

[54xiaojuan]

引用 1 楼 三岁打酱油 的回复:

监听当前dom的滚动位置scrollTop，在Destory里面写入缓存。下次进入读取缓存滚动到上次的位置，没有缓存就默认最上

我试过了，没成功的，给你看一下我的代码： created: function() { window.addEventListener("scroll",this.eventScrollTop, false) }， methods: { eventScrollTop(){ let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('11scroll',scrollTop) }, }， mounted(){ }, destroyed(){ //缓存 window.removeEventListener("scroll",this.eventScrollTop, true); }, activated() { window.addEventListener("scroll",this.eventScrollTop); console.log('123'); }, //keep-alive离开时触发 deactivated(){ window.removeEventListener("scroll",this.eventScrollTop); // console.log('退'); }, 没有实现效果

[jio可]

没看到有缓存scrollTop以及设置滚动的操作

[jio可]

destroyed(){ //缓存 // 这里写存缓存 用localStorage // key用当前的路由名或者path都可以 value等于当前滚动位置 }, mounted(){ // 读缓存设置滚动位置 },

[54xiaojuan]

引用 3 楼 三岁打酱油 的回复:

没看到有缓存scrollTop以及设置滚动的操作

在哪个函数设置呢？怎么做？

[jio可]

看楼上 document. documentElement.scrollTop = localStorage缓存的值转数字类型

[Ugly Monkey]

给router-view 里面添加keep-alive <keep-alive>标签包裹动态组件会缓存不混动的组建实例 而不会销毁。所以在由详情页返回列表页时，不让列表页刷新。而且data里面的数据不会丢失，就可以在data里面声明变量保存滚动条位置或者保存到Vuex里面都可以 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 设置 scrollTop 时是在 activated 方法里，