vue缓存页面返回到指定滚动位置

Vue2.0 专栏收录该内容
23 篇文章 2 订阅

vue缓存页面使用了keep-alive返回不会指定到滚动位置,添加了下文中的activated方法,直接使用 this.$refs.content.scrollTo(0,this.scroll);跳到指定滚动位置,其中this.scroll是记录的上次滚动的位置。

vue 中注册滚动事件与dom 并无不同

以下配合keep-alive 组件使用

在 mounted 注册滚动事件 

1

this.handleScroll 获取scrollTop

1

2

3

mounted(){

  window.addEventListener('scroll'this.handleScroll);

}

  

1

2

3

4

handleScroll () {

  let scrollTop = document.body.scrollTop;

  this.scroll = scrollTop;

}

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

1

2

3

4

5

6

7

activated() {

    if(this.scroll > 0){

       window.scrollTo(0, this.scroll);

       this.scroll = 0;

       window.addEventListener('scroll'this.handleScroll);

    }

}

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

1

2

3

deactivated(){

     window.removeEventListener('scroll'this.handleScroll);

}

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值