欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 17:13:32
问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置。这就需...

问题描述:

列表页进入详情页,或者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 的使用

等下周发版的时候,我贴上链接,可以体验下效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。