vue实现详情返回列表记录原始滚动位置

实现思路：

1、 页面使用内置组件 keep-alive 实现缓存
2、获取列表的滚动距离 
3、返回列表页面恢复高度

 

在路由文件中添加meta信息，将keepalive设置为true

?

1 2 3 4 5 6 7 8

{       path: '/pubCustomerPage',       name: 'pubCustomerPage',       meta: {         keepalive: true       },       component: () => import('../module/customerTotal/pubCustomerPage.vue'),     },

　　

 监听列表中滚动的距离，在activated钩子中调用并做记录

?

1 2 3 4 5 6 7 8 9 10 11 12

activated() {         this.listenerFunction();         this.$refs.scrollbox.scrollTop = this.scrollTop; }, methods: {         listenerFunction(e) {             document.addEventListener("scroll", this.getScroll, true);         },         getScroll() {             this.scrollTop = this.$refs.scrollbox.scrollTop;         },     }

　　

在deactivated钩子在移除监听

?

1 2 3

deactivated() {      document.removeEventListener("scroll", this.listenerFunction); }

　　

如果从新的页面进来时候需要把滚动的值初始化

?

1 2 3

if (this.fromPath == 'customerTotal' || this.fromPath == "") {      this.$refs.scrollbox.scrollTop = 0; }