vant list组件滚动保留滚动条位置，结合keepAlive

前提是用的keepAlive组件来做缓存，app.vue代码

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if='$route.meta.keepAlive'/>
    </keep-alive>
    <router-view  v-if='!$route.meta.keepAlive'/>
  </div>
</template>

 

首先在路由文件router.js，给每个路由meta添加scrollTop和keepAlive

{
      path: '/',
      name: 'home',
      meta: {
        title: "标题",
        keepAlive: true,
        scrollTop: 0
      },
      component: Home
 },

然后在main.js,记录滚动条的位置

router.beforeEach((to, from, next) => {  
  if (from.meta.keepAlive) {
    const $content = document.querySelector('.content'); // 列表的外层容器
    const scrollTop = $content ? $content.scrollTop : 0;
    console.log('scrollTop', scrollTop)
    from.meta.scrollTop = scrollTop;
  }
  next();
});

最后在需要记录保留滚动条位置的地方获取通过activated（这个函数每次进入页面都会执行，只有结合使用keepAlive组件才有效）来获取scrollTop，

  activated () {
    const scrollTop = this.$route.meta.scrollTop;
    const $content = document.querySelector('.content');
    if (scrollTop && $content) {
      $content.scrollTop = scrollTop;
    }
  },