本篇文章主要介绍了 vue-scroller 记录滚动位置的示例代码, 小编觉得挺不错的, 现在分享给大家, 也给大家做个参考. 一起跟随小编过来看看吧
问题描述:
列表页进入详情页, 或者 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 的使用
等下周发版的时候, 我贴上链接, 可以体验下效果
来源: http://www.phperz.com/article/18/0129/362933.html