v-infinite-scroll element-plus无限加载

最新推荐文章于 2025-03-17 10:31:41 发布
最新推荐文章于 2025-03-17 10:31:41 发布
阅读量690 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_52214334/article/details/130975137
版权
在使用element-plus进行商品无限加载功能开发时，错误地将v-infinite-scroll指令应用到商品组件上，导致滚动时频繁触发，服务器性能受到影响。经过排查，发现应将指令绑定到父容器来正确实现无限滚动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在用element-plus做商品无限加载的时候，看了一下文档，觉得挺简单的，商品是我自己封装的一个组件，直接给整个组件添加了v-infinite-scroll指令，然后打开浏览器看了下，每次我一滚动鼠标 就会触发，直接干到报错，把服务器弄干卡了，后来一直没找到问题，网上各种搜，还是没有找到问题，最后发现我将指令绑定再商品盒子上！！！怪不得只要一滚动鼠标就触发，一定要好好检查，v-infinite-scroll指令写在父盒子上面

ElementUI中InfiniteScroll无法控制自动加载问题的解决
楊帥
04-26 1万+
InfiniteScroll官方文档 使用官方文档中的禁用加载例子来说明 <div class="first_left"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scr...
表格滚动分页加载——使用element-plus的无限滚动v-infinite-scroll与el-table同时使用出现滚动条定位到底部导致一直请求接口
qq_45840993的博客
09-26 9046
不知道UI抽什么风，所有列表都没用分页器，一律采用滚动加载。但我又是个懒蛋，不想手写所以就用了element-plus的无限滚动，但是v-infinite-scroll和el-table这俩搁一块就有bug了啊！！！在网上找了半天没遇到相似问题，现在来记录一下。本次开发中其实可以不用el-table的，因为这个列表并不展示头部，但是我又极其热爱el-table，所以不顾老大劝阻还是用了。好了好了，问题就是——。
vue3单独引用element-plus的Infinite Scroll无限滚动；vue3自定义指令
最新发布
i_am_a_div的博客
03-17 351
vue3单独引用element-plus的Infinite Scroll无限滚动；vue3自定义指令
element plus Infinite Scroll 无限滚动
09-17 2232
欢迎关注我的公众号：夜说猫，让一个贫穷的程序员不靠打代码也能吃饭~element plus官网中，Infinite Scroll示例使用的是数字，在实际项目运用中，我们更多的是使用json数组进行渲染，所以我们改写v-infinite-scroll属性的load方法。
列表无限加载---elementPlus提供的v-infinite-scroll指令
aliven1的博客
08-16 511
elementPlus提供的v-infinite-scroll指令。
vue ElementUI ：InfiniteScroll 无限滚动问题
qq_42732936的博客
03-09 2737
InfiniteScroll 无限滚动问题
InfiniteScroll 解决自动无限加载
qq_43421760的博客
08-24 1514
注意在滚动层外部需要给定高度，我给的是最高高度maxHeight：900px，infinite-scroll-distance="20"是离页面最底部20px时触发加载新数据。
解决其他路由组件滚动的时候触发了 添加了keep-alive和v-infinite-scroll组件的滚动加载方法导致不断加载
weixin_46748834的博客
12-23 746
解决其他路由组件滚动的时候触发了 添加了v-infinite-scroll、且已经缓存的组件的滚动加载方法导致不断加载
vue3+element-plus 通过v-infinite实现下拉滚动无限加载
柑橘乌云_
05-04 6130
Uncaught (in promise) TypeError: Cannot destructure property 'containerEl' of 'el[SCOPE]' as it is undefined.报错解决方法，vue3+element-plus 通过v-infinite实现下拉滚动无限加载
elementPlus 无限滚动
qq_43654065的博客
10-26 730
不知道为什么滚动条样式会失效。
element ui 官网 无限滚动 无限加载原因
wyangue的博客
07-21 2719
2021-7-21. 在组件中加入了element ui 无限滚动。 复制官网的代码，发现一直加载。 原因：1.ul标签的高度未设定。需设置。 2.未设置距离多少像素加载在ul标签中加入 infinite-scroll-distance="10" //距离10px加载。 ...
Element InfiniteScroll无限滚动的具体使用方法
10-15
综上所述，Element InfiniteScroll无限滚动通过`v-infinite-scroll`指令和相关的数据处理逻辑，能够非常方便地在Vue项目中实现动态内容的加载，提高页面的响应速度和用户交互体验。通过全局或局部引入`el-table-...
使用Element的InfiniteScroll 无限滚动组件报错的解决
10-15
在本文中，我们将探讨如何解决使用Element UI库中的InfiniteScroll无限滚动组件时遇到的错误。Element UI是一款流行的Vue.js组件库，提供了许多实用的UI组件，其中包括用于实现无限滚动效果的InfiniteScroll组件。...
vue element-ui InfiniteScroll v-infinite-scroll 无限滚动 仅触发1次或几次 无效 可行 解决方案
热门推荐
qingyuxx
11-04 1万+
环境 Vue @2.6.14 element-ui @2.15.6 问题 参考官网 Demo 使用 element-ui InfiniteScroll 无限滚动 v-infinite-scroll 组件后，仅触发1次或几次 无效 正文&解决方案 将infinite-scroll-distance设为1
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）
u012169390的博客
10-28 7598
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）现象先答案原因解决思路1、设置滚动元素的padding2、反复设置padding放弃，查看数据层3、读源码其他尝试1、可能是disabled 传值为false2、dom之间的嵌套关系、padding、margin3、嵌套了draggable 现象 1.我用14寸win笔记本开发连普通屏幕正常，测试用的笔记本（1920 分辨率，150%缩放）测出此问题 2.用chrome调试工具测试不同分辨率，某些分辨率偶尔复现此问题，小于
【vue3】element-plus下拉选择使用无限滚动实现下拉加载
qq_40305332的博客
01-18 2522
它会防止下拉框显示时直接触发无限滚动触底事件；isMounted防止出现‘Unhandled error during execution of directive hook’警告。注意：在此之前应调用getLIst()方法，对下拉数据进行初始化，否则初始数据为空。注意：style="overflow: hidden;template部分。
Vue3 + Element-Plus: 移动端使用无限滚动出现自动加载的bug
weixin_44016350的博客
12-12 2851
Vue3 + Element-Plus: 移动端使用无限滚动出现自动加载的bug
Vue3 中使用Element Plus的el _table实现表格无限循环滚动
u010971793的博客
03-13 1161
【代码】Vue3 中使用Element Plus的el _table实现表格无限循环滚动。
vue.runtime.esm.js:4605 [Vue warn]: Failed to resolve directive: infinite-scroll
10-17
这个警告通常是因为你在使用 `v-infinite-scroll` 指令时没有正确引入相关的插件或库。你需要在项目中引入 `vue-infinite-scroll` 插件，可以通过 npm 安装： ``` npm install vue-infinite-scroll --save ``` 然后在你的 Vue 项目中引入并注册该插件： ```javascript import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) ``` 这样就可以正常使用 `v-infinite-scroll` 指令了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coder__Song

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值