vue-scroller记录滚动位置的示例代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-scroller记录滚动位置的示例代码相关的知识,希望对你有一定的参考价值。

参考技术A 问题描述:
列表页进入详情页,或者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-router进行页面切换时滚动条位置与滚动监听事件解决Vue页面固定滚动位置的处理办法vue实现某元素吸顶或固定位置显示(监听滚动事件)

vue-scroller记录滚动位置

问题描述:

  列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置

解决问题思路:

  切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-routerbeforeRouteEnterbeforeRouteLeave这两个钩子去实现.

代码部分:

 

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记录滚动位置的示例代码的主要内容,如果未能解决你的问题,请参考以下文章

vue-scroller返回页面记住滚动位置

vue的滚动条插件vue-scroll

vue-scroll的高度设置

scroll事件实现监控滚动条并分页显示示例(zepto.js)

Flutter 可滚动组件:ScrollController

滚动视图和图像拖动问题