keep-alive的activated,deactivated钩子,及列表scrollTop值存储,返回时还在该位置
来源:互联网 发布:c语言编程器 编辑:程序博客网 时间:2024/05/22 02:30
先了解下keep-alive的一些内容:
但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了keep-alive的功能:
<template> <div class="app"> <keep-alive> <router-view></router-view> </keep-alive> </div></template>
created: function () { console.log(1) }, mounted: function () { console.log(2) }, activated: function () { console.log(3) }, deactivated: function () { console.log(4) }
页面生命周期钩子如上面的代码所示,这四个是最常用到的部分。这部分需要注意下,当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
我们知道keep-alive之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,才使用VirtualDOM进行diff更新。故,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。
上面提到activated和deactivated的钩子,并作出了解释,下面我们实现一个小功能;
需求:在vue项目中,如果我们当前在一个类似新闻列表的页面,当我们向下滑到100页,然后点击进入某个新闻详情,当我们看结束之后后退,但是我们发现,返回后页面又返回到第一页了,想想这时用户的感受,所以我们要解决这个问题,让该页面保存住跳转之前的scrollTop值,然后饭后后将这个值赋给当前页面,这样问题就完美解决了,下面上代码
首先是keep-alive缓存,这里需要我们需要缓存的是几级路由,我这里是一级路由
<keep-alive> <router-view></router-view></keep-alive>
下面是我们目标页面代码的实现
activated () { // 这里的document.body.scrollTop需要写兼容性问题 if (document.body.scrollTop) { document.body.scrollTop = sessionStorage.getItem('roll') } else { document.documentElement.scrollTop = sessionStorage.getItem('roll') }// scrollTop = sessionStorage.getItem('roll')// $('html, body').animate({scrollTop: asd}, 500) window.addEventListener('scroll', this.roll) }, deactivated () { sessionStorage.setItem('roll', this.top) console.log(sessionStorage.getItem('roll')) window.removeEventListener('scroll', this.roll) },
上面的思路是当我们离开时用sessionStorage.setItem(‘roll’, this.top)记录一下scrollTop值,这里需要注意window.removeEventListener(‘scroll’, this.roll)这句一定要写,用来取消scroll监听事件,如果不取消,它会继续监听下个页面的scrollTop值,这时的scrollTop就不是我们想要的了。
上面的activated里面的scrollTop,我这里写了兼容,如果你们的电脑不写兼容不报错,你们页可以不写。
监听的roll函数写在methods中
roll () { this.top = document.body.scrollTop || document.documentElement.scrollTop }
以上就是解决方案,完
- keep-alive的activated,deactivated钩子,及列表scrollTop值存储,返回时还在该位置
- 在数组中寻找某个特定整型值的存储位置,并还回一个指向该位置的指针
- socket的keep-alive
- HTTP的Keep-Alive
- Keep-Alive简介及在Tomcat中配置
- Keep-Alive简介及在Tomcat中配置
- 不可忽略的Keep Alive
- HTTP keep-alive的适用性
- HTTP keep-alive的适用性
- HTTP Keep-Alive的作用
- TCP的keep-alive小结
- nginx的keep-alive配置
- vue keep-alive的作用
- vue,keep-alive的作用
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- android-studio安装过程详解
- 开源地图MapBox自定义(二):基本概念
- Android文件上传带参数
- 重磅 | 周志华最新论文:首个基于决策树集成的自动编码器,表现优于DNN
- 笔记 | 吴恩达Coursera Deep Learning学习笔记
- keep-alive的activated,deactivated钩子,及列表scrollTop值存储,返回时还在该位置
- 资源 | AI、神经网络、机器学习、深度学习以及大数据学习备忘单
- 观点 | 李开复谈AI创业的“风口”和“泡沫”
- 充电 | 打开机器学习的大门,需要了解哪些知识?
- 资源 | 盘点国外NLP领域40大高校及相关知名学者
- 独家 | 我们扒出了这家中国创业公司,竟比苹果iPhone X早两年推出黑科技,还不用借助深度摄像头
- 又一名大学毕业生因销售VPN被捕!
- 硬货 | 一文解读完五篇重磅ACL2017 NLP论文
- sed截取某个区间的内容