vue-scroller记录滚动位置
Posted 无敌小坑笔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-scroller记录滚动位置相关的知识,希望对你有一定的参考价值。
问题描述:
列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
代码部分:
beforeRouteEnter(to,from,next){ 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,from,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 的使用
等下周发版的时候,我贴上链接,可以体验下效果
以上是关于vue-scroller记录滚动位置的主要内容,如果未能解决你的问题,请参考以下文章
从其他活动返回到同一片段时,如何保存和恢复片段中 RecyclerView 的滚动位置?
音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )