问题描述:
列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforerouteenter和beforerouteleave这两个钩子去实现.
还有一种更简单粗暴的方法， vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。
代码部分:
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.js中实现分页中单击页码更换页面内容
在vue2.0组件中如何实现传值、通信
webpack 4.0.0-beta.0版本新特性（详细教程）
利用springmvc解决vue跨域请求
vue组件和route的生命周期（详细教程）
在vue2.0中实现用户权限控制
以上就是在vue-scroller中如何标记记录滚动位置的详细内容。