缓存滚动位置:解决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()
	},
}
相关推荐
Mr Aokey38 分钟前
解决Redis数据丢失难题:深入理解RDB与AOF持久化机制
数据库·redis·缓存
xxxxxxllllllshi44 分钟前
Cookie、Session、JWT、SSO,网站与 APP 登录持久化与缓存
java·开发语言·jvm·数据结构·缓存·面试
不良人天码星4 小时前
谈谈redis的持久化
数据库·redis·缓存
重整旗鼓~7 小时前
27.Redisson基本使用和可重入性
数据库·redis·缓存
SunsPlanter8 小时前
苍穹外卖--04--Redis 缓存菜品信息、购物车
数据库·redis·缓存
程序员三明治9 小时前
【Mybatis从入门到入土】ResultMap映射、多表查询与缓存机制全解析
java·sql·缓存·mybatis·resultmap·缓存机制·多表查询
洲覆9 小时前
Redis 事务机制:Pipeline、ACID、Lua脚本
数据库·redis·缓存·lua
CodeBlossom10 小时前
Redis速通
数据库·redis·缓存
Achou.Wang21 小时前
源码分析 golang bigcache 高性能无 GC 开销的缓存设计实现
开发语言·缓存·golang
HECHEN****1 天前
Composition API 与 React Hook 很像,区别是什么?
vue·面试题