缓存滚动位置:解决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()
	},
}
相关推荐
煎饼小狗1 小时前
Redis五大基本类型——Zset有序集合命令详解(命令用法详解+思维导图详解)
数据库·redis·缓存
雯0609~3 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
Backstroke fish4 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序4 小时前
vue3 封装request请求
java·前端·typescript·vue
Lysun0015 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
菠萝咕噜肉i5 小时前
超详细:Redis分布式锁
数据库·redis·分布式·缓存·分布式锁
只因在人海中多看了你一眼8 小时前
分布式缓存 + 数据存储 + 消息队列知识体系
分布式·缓存
Dlwyz9 小时前
redis-击穿、穿透、雪崩
数据库·redis·缓存
程序视点12 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā13 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue