解决其他路由组件滚动的时候触发了 添加了keep-alive和v-infinite-scroll组件的滚动加载方法导致不断加载

最新推荐文章于 2023-08-24 11:06:12 发布
最新推荐文章于 2023-08-24 11:06:12 发布
阅读量642 收藏
点赞数
分类专栏： vue 文章标签： 其他 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46748834/article/details/122118052
版权

解决思路：
添加多一个数据来判断该组件是否被激活，进而判断此时是否要禁用加载。

在element-ui中的禁用加载，是使用一个计算属性disabled来控制是否禁用的
在这里插入图片描述
在这里插入图片描述
此时我们添加多一个数据isActived
在这里插入图片描述
在激活的时候 ，将isActiced设置为false
在缓存的时候，将isAcitced设置为true
在这里插入图片描述
然后改造控制是否禁用加载的计算属性disabled
在这里插入图片描述
通过第一个||来实短路运算

  • 当被激活的时候，isActived为false，一定会执行||后面的判断条件,根据原本的条件来决定是否禁用加载
  • 当被缓存的时候，isActived为ture，不执行||后面的判断条件，直接返回true，禁用加载
乌鱼子啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-infinite-scroll 与 多次调用loading遇到的坑
qiang17_10_09的博客
12-13 1万+
vue-infinite-scroll 与 多次调用loading遇到的坑 遇到的问题 在用 开发移动端商城过程中,运用mint-ui 框架的 无限滚动加载Infinite scroll 和 keep-alive 缓存 ,在从列表页跳到详情页的时候 一直触发loading 无限加载数据。 解决方案 从列表页跳到详情页用编程式导航,并且跳页时把loading 改为 true,禁止触发加载函数,从详情...
Infinite-Scroll无限滚动加载数据
08-11
NULL 博文链接：https://hjl87423050.iteye.com/blog/2232973
InfiniteScroll 解决自动无限加载
最新发布
qq_43421760的博客
08-24 636
注意在滚动层外部需要给定高度，我给的是最高高度maxHeight：900px，infinite-scroll-distance="20"是离页面最底部20px时触发加载新数据。
v-infinite-scroll element-plus无限加载
qq_52214334的博客
05-31 355
今天在用element-plus做商品无限加载的时候，看了一下文档，觉得挺简单的，商品是我自己封装的一个组件，直接给整个组件添加了v-infinite-scroll指令，然后打开浏览器看了下，每次我一滚动鼠标 就会触发，直接干到报错，把服务器弄干卡了，后来一直没找到问题，网上各种搜，还是没有找到问题，最后发现我将指令绑定再商品盒子上！怪不得只要一滚动鼠标就触发，
vue-infinite-scroll上拉加载没反应？不断重复加载？
热门推荐
1234567~~
03-16 1万+
有兴趣的话可以先看看文档https://github.com/ElemeFE/vue-infinite-scroll 在这只是记录些常碰到的坑点： 这里使用cdn https://unpkg.com/vue-infinite-scroll@2.0.2/vue-infinite-scroll.js <script src="../node_modules/vue-infinite-sc...
在vue路由当中使用keep-alive避免多次加载组件，减少消耗
weixin_30690833的博客
07-04 268
今天在vue当中使用了full-page这个组件。但是发现在每次路由跳转完之后，再回到使用fullpage的这个页面，fullpage会报错，fullpage只能初始化一次。 这个时候给路由使用keep-alive就可以完美的解决这种问题了 但是同时会导致一个问题，由于组件缓存了，会导致beforeDestroy和destroyed两个生命周期消失 转载于:https://www....
react-infinite-scroll-hook:创建无限滚动列表组件的简单钩子
04-30
这是创建无限滚动组件的钩子！ 现场演示在。 基本上，我们需要设置一个sentry组件来触发无限加载。 当sentry在屏幕上变为可见或几乎变为可见时（当然是基于我们的配置），它会在IntersectionObserver的帮助下触发...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
react-simple-infinite-scroll:残酷简单的React Infinite滚动组件
05-17
注意：此程序包最终会在非常非常大的列表上变得效率低下，因为它会不断向DOM添加节点。 但是，对于无法使用开窗技术以及用户实际滚动几百行（而不是几千行）的情况，此程序包非常有用。 为什么不使用窗口react-...
使用vue-infinite-scroll实现无限滚动效果
12-04
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ https://www.npmjs.com/package/vue-infinite-scroll npm i vue-infinite-scroll --save main.js使用 import vueiInfinite from 'vue-infinite-scroll' Vue.use(vueiInfinite) <div v-infinite-scro
react-infinite-scroll-component：react中一个很棒的Infinite Scroll组件
02-05
React无限滚动组件 仅需4.15 kB即可消除所有无限滚动难题的组件！ 添加了Pull Down to Refresh功能。 实际上有效的无限滚动，并且集成起来非常简单！安装 npm install --save react-infinite-scroll-component or ...
无穷滚动加载(v-infinite-scroll)
qq_40765784的博客
09-02 1571
列表底部触发加载函数
vue-infinite-scroll 滚动分页加载
lsy__lsy的博客
07-03 5545
1、安装插件npm i --save v-infinite-scroll2、使用main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll);.vue文件 &lt;div class="content clearfix"&gt; &lt;ul class="clearfix"&gt; ...
vue使用v-infinite-scroll实现滚动条边滚动边加载
肖帅的博客
04-08 4538
vue使用v-infinite-scroll实现滚动条边滚动边加载 1，安装v-infinite-scroll npm install vue-infinite-scroll --save 2 在main.js中引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 3，使用 <div v-i...
记录vue-infinite-scroll:列表无限加载使用步骤(超简洁)
qq_42288851的博客
07-15 1098
1.安装 cnpm i vue-infinite-scroll --save 2.main.js中引入 import vueiInfinite from 'vue-infinite-scroll' Vue.use(vueiInfinite) 3.vue文件中使用(需要无限加载的标签添加:v-infinite-scroll="loadMore") <ul class="newsList" v-infinite-scroll="loadMore" infinite-scroll-disa
Vue Element UI v-infinite-scroll无限触发问题解决+样例代码
JIZQAQ学习&踩坑笔记本
05-12 1万+
官方文档： ElementUI ——InfiniteScroll 无限滚动 https://element.eleme.cn/#/zh-CN/component/infiniteScroll 根据文档这部分，写了我的代码，开始长下面这样子…结果发现了一个问题，就是进入页面之后像是 infinite-scroll-disabled和infinite-scroll-immediate没有生效似的，页面疯狂调用onLoad函数。 <div class="left" v-inf...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
勿忘初心的博客
05-04 3496
关于网友提出的“ (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问，本网通过在网上对“ (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”有关的相关答案进行了整理，供用户进行参考，详细问题解答如
关于vue的父组件触发子组件&&子组件触发父组件方法
qq_41239398的博客
03-29 288
父组件触发子组件 &&子组件触发父组件方法 父组件触发子组件方法 给子组件一个ref标记 <button ref="mark" @click="change">点击</button> 然后通过this.$refs[‘这里是你的ref值’]加上方法名来调用就可以了 2.this.$refs['mark'].change() change() 是我定义在组...
element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载
05-26
同时，我们在 el-timeline 中添加了 infinite-scroll-disabled 和 infinite-scroll-distance 属性，分别用于控制是否禁用无限滚动和触发加载更多数据的距离。 现在我们已经完成了 element-ui 的时间线组件 + 自动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值