「keep-alive」 和scroll的入坑经历

最新推荐文章于 2023-07-19 16:08:44 发布
最新推荐文章于 2023-07-19 16:08:44 发布
阅读量359 收藏
点赞数 1
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24930411/article/details/107252548
版权

keep-alive 和scroll的bug

记一次入坑经历：
事情经过：调用了别人写好了 lazyLoad组件。但是这个组件 是包在keep-alive下的， 也就是会被缓存的。
在A组件中，使用了对scroll事件的监听，没问题。
但在B组件，同样适用scroll事件的监听，会同时监听A组件的scroll事件。

解决方法：
假设是A组件切到B组件，那么就在A组件***deactivated***钩子中，对scroll事件进行解绑。也就是 window.removeEventLisener(‘scroll’, scrollEvent)

qq_24930411
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Apache Hadoop ElasticSearch 7.9 官方配置文档中文版（仅供参考）
Never-Say-Never
08-22 1472
配置 1 必要设定 es.resource Elasticsearch 资源位置，在该位置读取和写入数据。需要格式<index>/<type>（相对于Elasticsearch）主机/端口 es.resource = twitter/tweet # index 'twitter', type 'tweet' es.resource.read（默认为es.resource） 用于写入（但不读取）数据的Elasticsearch 资源。通常用于动态资源写入.
better-scroll和keep-alive导致的页面无法滚动问题（个人笔记）
lkxxxuan的博客
04-22 944
开发的时候，在A页面进行填写信息，跳转到B页面选择信息并且缓存A页面，当从B页面返回到A页面时，better-scroll卡住无法滚动，但是当我点击A页面添加图片，添加成功后，A页面恢复正常。这里我用了很多大佬的解决方案，最后我自己成功的解决方法： mounted() { this.initScroll(); }, methods: { initScrol...
使用keep-alive时，返回后界面表格滚动条位置保留的功能实现
AmyGeng123的博客
10-19 997
使用keep-alive时，返回后界面表格滚动条位置保留的功能实现
vue中 进入详情页记住滚动位置（keep-alive）
涐的野心就是占有沵
04-08 1万+
vue中 进入列表详情计算滚动位置 &gt; 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive 首先在路由中引入需要的模块 { path: ‘/scrollDemo’, name: ‘scrollDemo’, meta: { keepAlive: true // 需要缓存 }, ...
不使用keep-alive，记住列表的滚动位置（scrollTop的正确使用方式）
chenlim87的博客
12-18 1100
需求如图，首页日常任务模块—>日常任务列表（父组件）–>任务列表（子组件）–>详情页（孙组件）。 就是从首页进入功能列表页父组件，滚动一段距离点击自立项目进入到任务子组件，再滚动一段距离点击第一条带日期的那一项进入任务详情，然后返回时要返回到刚才滚动的位置，而不是从列表第一条开始。 项目使用的vue框架和vant组件，我按照vue官方文档里介绍说把<router-view>用<keep-alive>包裹起来就可以实现，各组件内也定义了name属性，然而并没有卵用，.
ElasticSearch三种分页方式以及各优缺点(一文知道如何抉择）
欢迎来到三十七度的博客
05-10 2521
1、关于 Elasticsearch 分页查询，这几个问题经常被问到 问题1：想请问下，一次性获取索引上的某个字段的所有值（100 万左右），除了把 max_result_window 调大 ，还有没有啥方法？ 问题2：关于 es 的分页，每次拿 20 条展示在前台，然后点击下一页，在查询后面的20条数据，应该要怎么写？ 问题3：From+size、Scroll、search_after 的本质区别和应用场景分别是什么？ 2、 Elasticsearch 支持的三种分页查询方式
修复使用keep-alive缓存使用better-scroll滚动条的页面，导致的页面无法滚动滑动的问题
weixin_43185419的博客
01-14 1024
问题复现：一开始在vue移动端项目中使用的better-scroll滚动条的插件，后面做项目性能优化时，需要对该页面进行缓存。调试过程中发现页面无法滑动，真机测试中则是偶尔能滑动，偶尔不行。 问题分析：在使用better-scroll插件中，需要给滚动条设置当前高度，而使用keep-alive缓存页面后，则缺失了刷新滚动条的操作。 解决办法：我们可以使用activated生命周期钩子来进行滚动条刷新的操作。 关于activated生命周期钩子，在vue.js文档的这个位置：activated生命周期钩子
vue中使用KeepAlive保存状态及滚动位置(scrollTop)
qq_45641978的博客
06-27 2657
第一种方式： 第二中方式：需要在目标路由添加一个meta属性 配置上keepAlive就可以实现状态的保存。1.使用ref获取dom，或者使用js直接获取dom 2.keepAlive存在两个生命周期钩子，配合钩子实现代码 即可实现如果跳转的带有是iframe，跳转回来会失效 请看下一篇文章......
vue中keep-alive缓存滚动条
weixin_44696379的博客
07-03 4881
前言 这几天公司在做一个app，需要嵌套H5页面，于是H5页面的编写就落到了本人的手里，啥都不说just do it 别逼逼！ 项目过程中因为做的页面是列表页和详情页，为了接近原生和用户体验好，所以在列表和详情路由切换时候就要缓存列表页数据（路由跳转就是 列表➡详情返回到➡列表），使用户体验更好 怎么实现 keep-alive 第一步，在路由元信息里配置需要缓存的页面，我用的keepAlive表示...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
勿忘初心的博客
05-04 3495
关于网友提出的“ (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问，本网通过在网上对“ (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”有关的相关答案进行了整理，供用户进行参考，详细问题解答如
vue中进入详情页记住滚动位置的方法(keep-alive)
01-19
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: ‘/scrollDemo', name: ‘scrollDemo', meta: { keepAlive: ...
ngx-infinite-scroll：角度的无限滚动指令
01-31
从Angular 6及ngx-infinite-scroll@THE_VERSION.0.0开始ngx-infinite-scroll@THE_VERSION.0.0 对于Angular 4和Angular = ^ ngx-infinite-scroll@0.8.4使用ngx-infinite-scroll@0.8.4版本对于rxjs = <5.5.2的...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 [email protected]，使用前请熟悉：[email protected]@2.12.0安装npm install --save el-table-infinite-...
vue的无缝滚动组件vue-seamless-scroll实例
08-28
本篇文章主要给大家讲解了vue的无缝滚动组件vue-seamless-scroll的用法，需要的朋友参考学习下吧。
ngx-ui-scroll：Angular的无限虚拟滚动
02-01
用户看不见的其他数据集元素将使用向上和向下的空白填充元素虚拟化，这些元素应提供具有一致滚动条参数的一致视口。 * uiScroll是一个结构指令，其作用类似于* ngFor，并且对集合中的每个项目渲染一次模板化元素。...
[ElasticSearch]Java API 之 滚动搜索(Scroll API)
热门推荐
SmartSi
10-13 2万+
一般搜索请求都是返回一"页"数据，无论数据量多大都一起返回给用户，Scroll API可以允许我们检索大量数据（甚至全部数据）。Scroll API允许我们做一个初始阶段搜索并且持续批量从Elasticsearch里拉取结果直到没有结果剩下。这有点像传统数据库里的cursors（游标）。 Scroll API的创建并不是为了实时的用户响应，而是为了处理大量的数据（Scrolling is...
Elasticsearch 7.x版本重大改变（Breaking changes in 7.x）
withlw
09-17 6160
Breaking changes in 7.0 This section discusses the changes that you need to be aware of when migrating your application to Elasticsearch 7.0. 本部分讨论将应用程序迁移到Elasticsearch 7.0时需要注意的更改。 Indices created before 7.0 Elasticsearch 7.0 can read indices created in v
缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题
技术圈
07-19 2137
但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。怎样缓存滚动位置？这篇文章教会你。
解决better-scroll和keep-alive使用产生的无法保持之前滑动位置bug
weixin_43294560的博客
07-31 789
解决思路 (1)使用当有keep-alive的两个生命周期函数,activated和deactivated (2)当离开页面时,记录最后的滑动位置 (3)当进入页面时,滑动到记录的滑动位置并刷新scroll来重新计算一下滑动位置 代码示例: activated() { // activated时,dom还未加载完成 if(this.$refs.scrolls.scroll!=null) { //通过ref获取到滑动组件内部的属性和方法 this.$refs
vue-scroll和vue-seamless-scroll的区别
最新发布
03-23
vue-scroll和vue-seamless-scroll都是用于实现滚动效果的Vue组件，它们的区别在于功能和使用方式上有所不同。 1. vue-scroll： - 功能：vue-scroll是一个基于Vue的滚动插件，可以实现自定义滚动条、滚动到指定位置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值