问题描述:
列表页进入详情页,或者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滚动轴插件better-scroll使用详解
- Vue的el-scrollbar实现自定义滚动
- vue中实现移动端的scroll滚动方法
- vue利用better-scroll实现轮播图与页面滚动详解
- vue的无缝滚动组件vue-seamless-scroll实例
- vue better scroll 无法滚动的解决方法
- vue.js2.0 实现better-scroll的滚动效果实例详解
- vue scroller返回页面记住滚动位置的实例代码
- 详解无限滚动插件vue-infinite-scroll源码解析
- vue 框架下自定义滚动条(easyscroll)实现方法
- 详解 vue better-scroll滚动插件排坑
- vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解