zoukankan      html  css  js  c++  java
  • vue-scroller记录滚动位置

    问题描述:

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

    解决问题思路:

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

    还有一种更简单粗暴的方法, 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 的使用

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

  • 相关阅读:
    Eclipse中用两个控制台测试网络通信程序
    c++ primer 11 泛型算法
    c++ primer 10 关联容器
    c++ primer 9 顺序容器
    c++ primer 8 标准IO库
    安装使用
    InfluxDB介绍
    proxy.go
    monitor.go
    balancer.go
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7701194.html
Copyright © 2011-2022 走看看