vue组件获取 scrollTop焦点 和设置scrollTop 来保存组件的数据和滚动位置

我的项目中使用了vue和 vant 其中封装的组件有点多，先要的效果就是 缓存list数据并且下拉数据时候 当 点击item项目时候 按回退时候 滚轮还是在原来位置
其中 数据缓存不在这里说了使用的是
上代码

这是封装的组件内部是什么不重要 主要是ref=“articleListBox”

<template>
<div class="article-list" ref="articleListBox">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-text="suText" success-duration="700">
<van-list
ref="list"
v-model="loading"
:finished="finished"
:error.sync="error"
error-text="请求失败，点击重新加载"
finished-text="没有更多了"
@load="onLoad"
>
<article-item v-for="(item,index) in list" :key="index" :article="item"/>
<!--<van-cell v-for="(item,index) in list" :key="index" :title="item.title"/>-->
</van-list>
</van-pull-refresh>
</div>
</template>

关键代码在 mounted 可以获取 监听scroll

mounted () {
// 通过$refs获取dom元素
this.box = this.$refs.articleListBox
// 监听这个dom的scroll事件
this.box.addEventListener('scroll', () => {
console.log(' scroll ' + this.$refs.articleListBox.scrollTop)
this.scTop = this.$refs.articleListBox.scrollTop
}, false)
},

在离开页面时候会调用keep-alive钩子函数把数据保存到本地

deactivated () {
//当页面被缓存且离开这个页面时候触发 把查询的高度保存到本地
setItem('scTop', this.scTop)
},

必须在activated 中设置scrollTop 因为你的容器要有数据才可以设置scrollTop
(keepalive缓存了数据 当再次进入这样页面时候会走activated 构造函数)

activated () {
/*
* 把本地高度设置给 组件 必须在activated中设置 因为容器要先有数据（高度）才可以scrollTop
* */
this.$refs.articleListBox.scrollTop = getItem('scTop')
},

最后实现就是保存 list数据和滚动位置