vue-scroller记录滚动位置的示例代码

发布时间：2020-12-17 02:37:58 所属栏目：百科来源：网络整理

导读：问题描述: 列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置解决问题思路: 切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更

问题描述:

列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置

解决问题思路:

切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.

还有一种更简单粗暴的方法， vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。

代码部分:

if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置

sessionStorage.askPositon = '';

next();

}else{

next(vm => {

if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this

 setTimeout(function () {

  vm.$refs.scrollerBottom.scrollTo(0,sessionStorage.askPositon,false);

 },0)//同步转异步操作

}

})

}

},beforeRouteLeave(to,next){//记录离开时的位置

sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top;

next()

需要注意的点:

1.熟悉vue-router和vue-scroller的api

2.beforeRouteEnter的时候，是无法通过this去访问vue实例的，需要借助于vm

3.setTimeout 0 的使用

等下周发版的时候，我贴上链接，可以体验下效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!