vue-scroller记录滚动位置的示例代码
更新时间：2018年01月17日 16:44:27 作者：无敌小坑笔
本篇文章主要介绍了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 的使用
等下周发版的时候，我贴上链接，可以体验下效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue源码探究之虚拟节点的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要为大家详细介绍了基于vue.js的分页插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家介绍了前端vue3架构setup使用教程，详细介绍 setup 的用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
Vue3 中 watch 与 watchEffect 区别及用法小结
这篇文章主要介绍了Vue3 中 watch 与 watchEffect 有什么区别？watch中需要指明监视的属性，也需要指明监视的回调，而watchEffect中不需要指明监视的属性，只需要指明监视的回调，回调函数中用到哪个属性，就监视哪个属性，本文给大家详细介绍，需要的朋友参考下2022-06-06
这篇文章主要介绍了vue页面回退或关闭,发送请求不中断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要给大家总结介绍了关于vue项目调试的三种方法,大家可以根据需要选择调试方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
下面小编就为大家分享一篇在vue里面设置全局变量或数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue3中的defineExpose使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
最新评论