vue-infinite-scroll代码没错的情况下直接加载到最后一页

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

vue-infinite-scroll代码没错的情况下直接加载到最后一页
疑问：一打开页面就直接加载到最后一页了，页面明明够长而且有滚动条
测试：
在这里插入图片描述
刷新一下直接跳到第二页然后下滑后infiniteScroll的功能正常

解决办法：
在这里插入图片描述
先在data里面将busy改成true然后在mounted里面把this.busy的值改成false
原因：页面在刷新的时候是先加载完内容才去调用的数据库接口数据，或者可以用created钩子加载后台数据

哥只会Hello World
关注
专栏目录
详解无限滚动插件vue-infinite-scroll源码解析
10-17
主要介绍了详解无限滚动插件vue-infinite-scroll源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue+mui 上拉加载
07-11
mui上拉插件结合vue示例代码
element 表格 table 滚动条未触底一直请求数据
细节怪的博客
08-15 1294
直接使用官网的无限滚动组件会发现它只对ul、div等元素有用，但是加在table自身上就会出现“页面刚打开就一直请求，直到数据请求完毕”的bug。
InfiniteScroll 解决自动无限加载
最新发布
qq_43421760的博客
08-24 1080
注意在滚动层外部需要给定高度，我给的是最高高度maxHeight：900px，infinite-scroll-distance="20"是离页面最底部20px时触发加载新数据。
element-ui的InfiniteScroll组件一直触发加载。
weixin_44012722的博客
07-24 6494
解决方法： 包含的UI 需要设置固定的高度，或者与视图同高，height：100%
列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案
csyldjy的博客
04-28 3192
后台返回的分页数据需要实现滚动条触底加载下一页， 用了element-ui 的指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。
解决其他路由组件滚动的时候触发了 添加了keep-alive和v-infinite-scroll组件的滚动加载方法导致不断加载
weixin_46748834的博客
12-23 696
解决其他路由组件滚动的时候触发了 添加了v-infinite-scroll、且已经缓存的组件的滚动加载方法导致不断加载
vue：pc项目下拉触底加载踩坑
qq_38850000的博客
05-08 1108
今天接到一个需求，将刚接回来的外包项目中的官网内的卡片+分页展示的资料列表改为table展示，且要支持下拉触底加载，自然而然就想到table+下拉触底插件。 由于项目中刚好使用的是element-ui，于是一通百度选择了el-table-infinite-scroll 在el-table上使用无限滚动加载 - 云+社区 - 腾讯云后来发现滚动到下面有时候会执行load2次，用下面的方法规避，间隔2秒才执行逻辑代码https://cloud.tencent.com/developer/article/1.
vue-virtual-infinite-scroll-基于Iscroll的vue2组件，支持具有高性能滚动，无限加载和拉动刷新的大数据列表。-Vue.js开发
05-27
vue-virtual-infinite-scroll基于Iscroll的vue2组件，支持具有高性能滚动，无限加载和拉动刷新的大数据列表。 vue-virtual-infinite-scroll基于Iscroll的vue2组件，支持具有高性能滚动，无限加载和拉动刷新的大数据...
使用vue-infinite-scroll实现无限滚动效果
08-27
在构建具有大量数据流的应用时，无限滚动（Infinite Scroll）是一种常见的功能，它可以在用户滚动页面接近底部时自动加载更多内容。Vue-infinite-scroll 是一个专门为 Vue 设计的无限滚动插件，它可以帮助开发者轻松...
infinite-scroll-vuejs:学习Vue-滚动到页面底部无限加载数据Demo
05-17
Vue下滚动到页面底部无限加载数据Demo 看到一篇, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件...
elementUI触底加载问题
qq_41099548的博客
11-11 1580
在vue中使用elementUI官方文档的无限触底加载组件时，鼠标滚轮未滚动就出现直接加载的情况。这时只需再次添加类名，并设置高度即可实现无限加载效果 <template> <ul class="infinite-list mylist" v-infinite-scroll="load" style="overflow:auto"> <li v-for="i in count" class="infinite-list-item" :key="i...
vue ElementUI ：InfiniteScroll 无限滚动问题
qq_42732936的博客
03-09 2594
InfiniteScroll 无限滚动问题
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-infinite-scroll.js常见问题记录
tutuLee_wedo的博客
05-11 3065
1.重复加载问题。初次进入列表页，会加载两次或者多次数据 造成重复加载的原因，罪魁祸首是infinite-scroll-disabled，在 loadMore 方法里确认infinite-scroll-disabled是否为true。请求数据后判断返回数据的长度是否等于设置分页的数量，等于分页数量为false，小于为true。 2.滚动时不起作用 如果要用数据对容器进行填充，那么必须设置容器高度 也可以是屏幕高度，不然无法触发loadMore事件 3.一直加载到最后一页的 查看容器以及父容器是否有
vue element-ui中组件v-infinite-scroll，无限触发loadMore事件解决
qq_30908357的博客
03-20 6418
使用element-ui组件v-infinite-scroll出现了无限触发滚动事件，关键问题代码如下： <template> <div ref="ullist" :style="autoHeight" class="infinite-list-wrapper" style="overflow:auto"> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"> <li v-.
jquery 瀑布流原理 页面到达底部加载数据的方法
一航jason
05-04 2992
function insertcode() { var $body = $("body"); $body.append('新增项目') $("#page_tag_load").hide(); } $(document
elementUi——table中实现滚动到底部无限加载数据功能——功能实现
yehaocheng520的博客
09-01 1万+
最近在看同事代码时，发现同事使用了一个表格自动滚动加载数据的功能。 这个功能适用于：表格中内容过多，需要分页展示，但是又不想使用分页组件，此时可以只展示一页的数据，然后当表格滚动到底部时，再加载下一页的数据。 参看大神链接：element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）：https://blog.csdn.net/baidu_27769027/article/details/101924676 elementUi官网上是有无限滚动加载功能的。
解决 element table 无限加载时，滚动到底触发多次请求
qing_xing_的博客
03-16 5518
在使用element的表格时，有时候会用到滚动加载的功能，使用element自带的无限滚动就可以，但是会有滚动条触底时，触发多次的情况。 1、安装 el-table-infinite-scroll npm install el-table-infinite-scroll -S 2、引入 main.js中 import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 3、
vue-infinite-scroll源码深度解析
`infinite-scroll-disabled`属性用于在`busy`状态（加载中）时禁用滚动加载，`loading`元素则显示加载状态。 接下来，我们讨论一下插件的核心实现。`vue-infinite-scroll`的核心在于监听滚动事件，并判断是否达到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值