Vue返回记住滚动条位置

Vue返回记住滚动条位置

vue 项目返回上一页，滚动到离开时的位置，网上能找到不少方法，以下尝试一种。

一共分三步：
给 router-view 添加 keep-alive
获取并存储当前 scrollTop
返回时取出并设置 scrollTop

例如，首页有个列表，点击列表进入二级页面，返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = 'Home' 的组件进行缓存，当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

然后，在首页的 Home 组件内，使用 beforeRouteLeave ，组件内的路由导航守卫，路由离开前，获取滚动高度，并记录在 data 中，当再次进入首页，判断是否存在这个滚动高度，若存在，则设置高度，否则置为 0

data:{
    homeTop : 0,
},

activated(){
    // do something
    console.log('activated home')
    document.getElementById('app').scrollTop = this.homeTop || 0
},
beforeRouteLeave (to, from, next) {
    // console.log('leave')
    let app = document.getElementById('app')
    this.homeTop = app.scrollTop || 0
    next()
},

移动端

页面布局如下：

image.png

整个页面是一个 ，下面又分了两个 tab，我们列表页是一个组件，位于 title 和 导航栏之间的区域。

布局代码：

    
我是标题
    
      
        

          
{{item}}
        
      
    
  

用到了 Vant-ui 的下拉刷新和上拉加载更多组件。

可以看到我一共给了四个 ref ，分别是最外层的 ref="list" ，下拉刷新组件 van-pull-refresh 的 ref="pullRefresh"，列表组件 van-list 的 ref="list"，和每个 item 的 ref="item"。

为什么给出这么多呢？因为这里有个大坑，也是我一直卡住的地方。

我们知道获取滚动位置是用 scrollTop 这个属性，下面我们就依次打印出这几个元素的 scrollTop 。

    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);

    this.$router.push({name: "detail", params: {data: item}})
},

image.png

WTF？只有第一个 wrapperScrollTop 有值，其他的都 undefined ！

我也不知道为啥，之前一直是获取后三者的 scrollTop ，一直获取不到，纠结了好久。为什么其他三个获取不到我现在还没整明白，知道原因的大佬可以指点一下。

知道了该获取哪一个元素的 scrollTop 就简单了，得到值只需存储起来即可。

因为使用了 keep-alive，页面被缓存起来了，所以 data 里的数据不会丢失，可以在 data 中声明一个变量 scroll 存储 scrollTop 的值。也可以使用 Vuex。

修改下 clickItem(item) 的代码，将 scrollTop 的值存储起来。

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);
    
    //存储 scrollTop 的值
    this.scroll = wrapperScrollTop;
   
    this.$router.push({name: "detail", params: {data: item}})
},

三、返回时取出并设置 scrollTop
上面已经介绍过了，使用 keep-alive 之后，每次返回页面会调用 activated 生命周期方法，所以在这个方法里设置之前记住的 scrollTop，达到记住滚动位置的效果。

代码很简单，只有一句话：

this.$refs.wrapper.scrollTop = this.scroll

完整代码如下

好了，以上就是 Vue 返回记住滚动条位置的详解。
原文链接：https://blog.csdn.net/solocoder/article/details/88124264