关于keep-alive缓存滚动条位置问题

已于 2023-03-02 10:54:41 修改
阅读量1.4k 收藏
点赞数 1
分类专栏： 自已学习分享 文章标签： javascript vue.js react html 前端
于 2020-10-23 10:31:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eno_Lin/article/details/109237215
版权

在这里插入图片描述
直接利用router里面的scrollBehavior去进行，假设你在a页面点击去b页面的话，那a页面在点击的那一刻在这里插入图片描述
可以先获取滚动条的位置并且存入，在router里面去判断你要指定滚动条位置以及项目判断逻辑了，y:600替换成自已修改的

kriserger
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用keep-alive保持滚动条位置的实现方法
10-17
主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题
最新发布
技术圈
07-19 2355
但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。怎样缓存滚动位置？这篇文章教会你。
Vue.js中keep-alive缓存（页面+滚动条）
xsgg1234的博客
08-04 1935
Vue.js中keep-alive缓存（页面+滚动条） 1、要缓存的标签中加入 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 2、router文件中meta加入keepAlive {
修复使用keep-alive缓存使用better-scroll滚动条的页面，导致的页面无法滚动滑动的问题
weixin_43185419的博客
01-14 1047
问题复现：一开始在vue移动端项目中使用的better-scroll滚动条的插件，后面做项目性能优化时，需要对该页面进行缓存。调试过程中发现页面无法滑动，真机测试中则是偶尔能滑动，偶尔不行。 问题分析：在使用better-scroll插件中，需要给滚动条设置当前高度，而使用keep-alive缓存页面后，则缺失了刷新滚动条的操作。 解决办法：我们可以使用activated生命周期钩子来进行滚动条刷新的操作。 关于activated生命周期钩子，在vue.js文档的这个位置：activated生命周期钩子
利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置
ydongabc
11-04 1845
<keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive> 组件后即可使用 activa...
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
keep-alive不能缓存多层级路由菜单问题解决
11-21
目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 ...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
react router5实现keep-alive 切换页面滚动条位置不变
sf1989424的博客
12-06 2357
安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 使用方法 使用CacheRoute替换Route 使用CacheSwitch替换Switch（因为Switch组件只保留第一个匹配状态的路由，卸载掉其他路由） import React fro...
keep-alive记录滚动条位置
陈景夏
04-22 895
在做消息列表时需要记录keep-alive切换页面的滚动条位置。 mounted() { // 监听滚动条的位置 this.$refs.scrollDom.addEventListener( 'scroll', (res) => { const height = res.target this.tableScrollTop = height.scrollTop
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 5447
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
vue 解决keepAlive不缓存滚动高度以及离开页面时清除页面缓存
乄Cokie乄的博客
08-05 2150
keepAlive、缓存滚动高度、离开页面时清除页面缓存
vue使用keep-alive组件缓存，保存页面滚动位置
guairena的博客
01-06 2611
需求：   vue项目H5页面列表页可以向上滑动加载下一页；当点击跳转详情页时，保留列表页的滚动位置；当从详情页点击跳转二级页面时，保存详情页的滚动位置。 思路： 列表页的滚动使用的是vux组件库中的Scroller组件，通过观察发现没有滚动条，而是通过样式transform实现的；当跳转详情页的时候缓存列表页可以记录当前位置和数据。 详情页页面未使用组件，而是通过原生的div平铺下来的内容，超出屏幕可视区域后自动生成滚动条，当跳转子表单页面的时候缓存详情页的数据及位置，发现此时详情页的数据缓存了，但是滚
使用keep-alive时，返回后界面表格滚动条位置保留的功能实现
AmyGeng123的博客
10-19 1051
使用keep-alive时，返回后界面表格滚动条位置保留的功能实现
keep-alive的使用，keep-alive保存滚动条位置。
qq_54753561的博客
12-28 3613
1、keep-alive是Vue提供给我们一个内置组件，会缓存不活动的组件实例，而不是销毁它们， 作为标签使用 包裹在需要缓存的组件外 2、在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前）
王佳斌
08-25 3204
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），实现从详情返回列表,保持原先的滚动位置，vue使用keep-alive还原滚动位置的问题，nuxt.js项目页面缓存（keep-alive-props）回到指定滚动位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），vue项目中keep-alive的使用,从详情页返回列表时保存浏览位， vue实现返回记住滚动位置，
vue使用keep-alive缓存页面 回到滚动位置
zluz_的博客
03-18 2008
vue使用keep-alive缓存页面 回到滚动位置
保存滚动位置的实现方法
qq_39410252的博客
10-01 2094
有的时候从列表页面进入详情页面再返回列表页面，即使使用了keep-alive缓存列表页，也会导致列表页面你的滚动位置发生了变化。两个页面高度不一致导致页面跳转的时候滚动条位置发生了改变；keep-alive不会缓存滚动条的位置。为了解决这个问题我们需要手动的保存列表页面的滚动条位置，并再切换回列表页面的时候滚动到保存的位置。
vue 中 keep-alive 缓存数据、离开时位置
05-20
对于离开时位置，可以在组件中使用 `keep-alive` 的 `include` 属性结合 `router-view` 的 `name` 属性来控制缓存组件的位置。例如： ```HTML <keep-alive :include="'componentA'"> <router-view :name="'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值