首页 > 其他 > 详细

vue-scroller记录滚动位置

时间:2017-10-20 21:28:32      阅读:1352      评论:0      收藏:0      [点我收藏+]

问题描述:

  列表页进入详情页,或者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记录滚动位置

原文:http://www.cnblogs.com/cjh1111/p/7701194.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!