缓存滚动位置:解决keep-alive组件缓存滚动位置失败问题

怎样在vue中缓存组件?大家都知道,使用keep-alive组件即可,但是使用keep-alive缓存页面后,发现虽然页面缓存成功了,但是列表的滚动条又自动回到了最上方。

是的,keep-alive组件是不会缓存滚动位置的

怎样缓存滚动位置呢?这是我们这一章讲的问题。

核心思想是在路由钩子函数中将滚动位置记录和复写。

在对应位置加入如下代码即可:

其中scrollBar是要获取到滚动内容的父元素,也就是含有滚动条的元素

javascript 复制代码
export default {
	data() {
		scroll: 0, //记录浏览位置
	},
	beforeRouteEnter(to, from, next) {
		next(vm => {
			const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
			scrollBar.scrollTop = vm.scroll
		})
	},
	beforeRouteLeave(to, from, next) {
		const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
		this.scroll = scrollBar.scrollTop;
		next()
	},
}
相关推荐
Hello.Reader3 小时前
RedisJSON 路径语法深度解析与实战
数据库·redis·缓存
千宇宙航7 小时前
闲庭信步使用图像验证平台加速FPGA的开发:第十课——图像gamma矫正的FPGA实现
图像处理·计算机视觉·缓存·fpga开发
Alfred king10 小时前
面试150 LRU缓存
链表·缓存·哈希表·lru·双向链表
寻觅~流光12 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
岸边的风12 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·缓存·状态模式
Liudef0612 小时前
大模型KV缓存量化误差补偿机制:提升推理效率的关键技术
人工智能·缓存
在未来等你13 小时前
Redis面试精讲 Day 1:Redis核心特性与应用场景
数据库·redis·缓存·nosql·面试准备
好青崧13 小时前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D13 小时前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
Kookoos16 小时前
ABP VNext + 多级缓存架构:本地 + Redis + CDN
redis·缓存·微服务·架构·abp vnext