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数据和滚动位置