解决v-infinite-scroll功能在更新数据时也触发加载函数

最新推荐文章于 2023-08-16 17:29:00 发布
最新推荐文章于 2023-08-16 17:29:00 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： Vue3.0 UI 文章标签： vue elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41176306/article/details/116525983
版权
Vue3.0 同时被 2 个专栏收录
25 篇文章 3 订阅
订阅专栏
UI
4 篇文章 0 订阅
订阅专栏
"本文介绍了在Vue中使用v-infinite-scroll进行列表懒加载时遇到的问题，即更新内容时意外触发加载函数。问题在于v-infinite-scroll在初始化时默认执行。解决方案是通过设置`infinite-scroll-immediate="false"`来防止初始化时的加载，确保在实际滚动时才调用加载函数。代码示例中展示了修正后的HTML结构。"
摘要由CSDN通过智能技术生成

解决v-infinite-scroll功能在更新数据时也触发加载函数

问题描述：

  • 一个需要懒加载的列表tbody，为其添加了v-infinite-scroll="load"来实现懒加载，但在我更新tbody中的内容时，依然会触发load函数，而且不止一次。

问题原因：

  • v-infinite-scroll方法会默认tbody初始化时执行。

问题解决：

  • 使用infinite-scroll-immediate="false"来禁用懒加载在tbody初始化时执行。

代码：

<tbody class="infinite-list" v-infinite-scroll="load" infinite-scroll-immediate="false">
	<!-- do something... -->
</tbody>
静尾
关注
专栏目录
mint ui-Infinite scroll无限加载阻止阻止多次加载问题
Alice9969的博客
08-10 3616
html:               &lt;ul v-infinite-scroll="loadData"               //加载调取的方法                     infinite-scroll-disabled="loading"      //是否加载                     infinite-scroll-distance="10"    ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
weixin_34235457的博客
01-22 141
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问，本网通过在网上对“ (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”有关的相关答案进行了整理 问题：(vue.js)vue 父组件使用kee...
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滚动加载插件vue-infinite-scroll
热门推荐
thatway的博客
03-02 2万+
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ https://www.npmjs.com/package/vue-infinite-scroll 安装 cnpm i vue-infinite...
Vue v-infinite-scroll无限触发问题
Iceti9er的专栏
01-30 3344
最近在学习vue做项目，用InfiniteScroll实现列表的时候，总是自动无限触发调用 load 方法，试了各种方法都不管用，最终在上文中找到了解决方法。v-infinite-scroll 配置的函数，不允许加“()”，也不能带参数。
elementUi——table中实现滚动到底部无限加载数据功能——功能实现
yehaocheng520的博客
09-01 1万+
最近在看同事代码时，发现同事使用了一个表格自动滚动加载数据的功能。 这个功能适用于：表格中内容过多，需要分页展示，但是又不想使用分页组件，此时可以只展示一页的数据，然后当表格滚动到底部时，再加载下一页的数据。 参看大神链接：element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）：https://blog.csdn.net/baidu_27769027/article/details/101924676 elementUi官网上是有无限滚动加载功能的。
Infinite-Scroll无限滚动加载数据
08-30
无限滚动加载数据，也称为“滚动加载”或“懒加载”，是现代网页和应用程序中常见的一种数据呈现方式。这种技术允许用户在滚动页面时自动加载更多内容，而不是一次性加载所有数据，从而改善用户体验，减少页面加载...
详解无限滚动插件vue-infinite-scroll源码解析
10-17
首先，我们看到插件的使用方法，它是一个自定义指令 (`v-infinite-scroll`)，通过绑定到一个方法（如 `loadMore`）来触发加载更多数据的逻辑。例如： ```html <div class="app" v-infinite-scroll="loadMore" ...
react-infinite-scroll:ReactJS无限滚动方法
05-12
在ReactJS中，实现无限滚动是一项常见的需求，特别是在数据量庞大的列表展示时，为了提高用户体验，我们可以采用“懒加载”或者“无限滚动”的技术。React-infinite-scroll 是一个专门用于React应用的无限滚动库，它...
【React】react-infinite-scroll-component 实现滚动加载
Jessieeeeeee的博客
06-23 4434
react-infinite-scroll-component 实现滚动加载
Element UI - v-infinite-scroll无限滚动组件
Subuprogrammer的博客
08-17 1万+
InfiniteScroll 无限滚动
elementui v-infinite-scroll无限滚动 下拉刷新
parkwoojin1102的博客
08-16 1627
/默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。1、v-infinite-scroll="load" //load无限滚动加载的方法。
vue element-ui v-infinite-scroll懒加载，加载更多，上下滑动加载更多
weixin_41346436的博客
06-25 5637
vue element-ui v-infinite-scroll懒加载，向上下滑动加载更多 其实这种滑动加载更多数据就是另外一种的常见分页功能，常见于v-for循环渲染出来的列表内容 首先先看下后端返回内容结构，和前端传的所需参数 第一次触发下拉事件，pageIndex = 2是没毛病的 第一次下拉后端接口返回参数，每次新增10条，第一次下拉，pageNum = 2 <template> //容器盒子 <div v-infinite-scroll="lo
vue ElementUI ：InfiniteScroll 无限滚动问题
qq_42732936的博客
03-09 2624
InfiniteScroll 无限滚动问题
无限滚动重置服务器,Element InfiniteScroll无限滚动的具体使用方法
weixin_32808905的博客
08-10 884
基础用法{{ i }}export default {data () {return {count: 0}},methods: {load () {this.count += 2}}}禁用加载class="list"v-infinite-scroll="load"infinite-scroll-disabled="disabled">{{ i }}加载中...没有更多了export defa...
vue滚动插件使用记录
weixin_42261369的博客
10-13 459
#滚动加载更多插件配置参数 infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中…”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。 v-infinite-scroll="loadMore"表示回调函数是loadMore infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，fa
v-infinite-scroll 下拉加载
最新发布
11-07
v-infinite-scroll是Vue.js的一个指令，它可以用于实现下拉加载的功能。当用户滚动到页面底部时，v-infinite-scroll指令会触发一个函数，你可以在这个函数中编写代码来加载更多的数据。使用v-infinite-scroll指令可以让你的网页更加流畅，用户可以无需点击按钮就能够加载更多的内容。 使用v-infinite-scroll指令的步骤如下： 1. 在Vue.js中引入v-infinite-scroll指令。 2. 在需要实现下拉加载的元素上添加v-infinite-scroll指令，并设置一个函数名。 3. 在Vue.js中编写这个函数，用于加载更多的数据。 举个例子，假设你有一个列表需要实现下拉加载的功能，你可以按照以下步骤来实现： 1. 在Vue.js中引入v-infinite-scroll指令：`import infiniteScroll from 'vue-infinite-scroll'` 2. 在需要实现下拉加载的元素上添加v-infinite-scroll指令，并设置一个函数名：`<ul v-infinite-scroll="loadMore">...</ul>` 3. 在Vue.js中编写这个函数，用于加载更多的数据：`methods: { loadMore() { ... } }`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值