别用infiniteScroll，坑的没命

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

劝告，别用。
为什么
一般都是列表页需要上拉加载，然后点击到详情，详情返回到列表，列表保存滚动状态，对吧，没问题吧
但是，只要列表使用了keep-alive或者你哪个地方用了keep-alive，凉凉直接，你会在详情页的接口里看到无限执行的列表页接口
搞了1个通宵，无解
在这里插入图片描述
于是我改用了vux的Scroller，真香

周18
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui的InfiniteScroll无效问题--神坑
weixin_42934142的博客
12-27 9260
=》 在使用上滑加载时，infinite-list的子元素不能用 flex，否则上滑事件无效。 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编...
vue组件懒加载 ajax,Vue 在使用异步Ajax时mint-ui的懒加载组件InfiniteScroll存在的坑...
weixin_35049095的博客
08-05 238
mint-ui是饿了么提供的一套vue移动组件，使用起来还是很方便的。其中有一类组件是用于分页加载数据的，比如Infinite Scroll和Loadmore这两个组件。最近同事在使用Infinite Scroll实现数据分页懒加载时，遇到了一个奇怪的坑，我花了不少时间才定位出来原因，今天就写到博客里记录一下避免以后再次踩坑。先来看看Infinite Scroll的介绍：Infinite Scro...
InfiniteScroll 无限滚动遇到的坑
Codernmx
06-25 2473
InfiniteScroll 无限滚动这玩意遇到的坑 解决 [Vue warn]: Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.” found in TypeError: Failed to execute ‘observe’ on ‘MutationObser
【Bug】v-infinite-scroll 下滑加载未生效
不务正业的野猴子
11-13 4233
<ul class="list" style="align-items: normal;" v-infinite-scroll="load" infinite-scroll-disabled="disabled"> <li v-for="item in itemList" class="list-item" style="align:left" @click="showChang...
react-infinite-scroller无法下拉加载
gd81325的博客
09-12 1855
简单来说就是这个插件只能有父级盒子和InfiniteScroll，不允许任何第三者插足 比如上图的Spin，加了之后父级就变成spin了，要给spin的盒子加样式 且infinite-list的子元素不能用 flex和float，也会导致失效 ...
elementui InfiniteScroll 无限滚动，在移动端会出现的问题
qq_53026081的博客
04-13 1391
我们在做pc时，一般的数据都会使用表格进行数据的分页处理，但是当到移动端时，我们对数据的处理一般都会使用列表的显示方式。这样的开发模式我们就会使用到elementui InfiniteScroll 无限滚动。根据文档这部分，写了我的代码，开始长下面这样子…结果发现了一个问题，就是进入页面之后像是 infinite--disabled和infinite-scroll-immediate没有生效似的，页面疯狂调用onLoad函数。
浅谈关于C语言中#define的副作用
01-20
但是在高级语言中，甚至C++中，是提倡用const的，不提倡用#define，因为#define有一定的副作用，玩不好就没命了。 这里我们讨论下#define的副作用。 # include # include # define CALL_WITH_MAX(a,b) f((a)>(b)?...
河北省唐山市滦南县中考语文名著阅读题复习专题新人教版20180528317
09-09
此外，外祖父的疯狂打人与“我”用枕头和皮靴反抗的无力也构成对比，反映出“我”对保护外祖母的无力感和对外祖父的强烈不满。 综上所述，这个复习专题通过《童年》中的片段，展示了家庭冲突、人物性格和情感的复杂...
七年级语文下册第四单元复习课件 3PPT学习教案.pptx
10-09
5. 文学鉴赏：通过寻找文章中的精彩句子并进行评点，可以提高对语言艺术的理解，如“呆呆地”用拟人手法形象地描绘了腰鼓静止时的状态，而“发狠”“忘情”“没命”等词的递进使用，则强化了情感表达的力度。...
飞机空战小游戏planewar(dev-c++开发纯字符输出模式)
最新发布
08-21
可以控制飞机移动、开火，游戏默认10关，每过一关敌方每波炮弹数量、每关总计炮弹数量、炮弹伤害值、炮弹血量、炮弹移动速度会增加，飞机默认3条命，两架飞机都没命时，游戏gameover。如果过了最后一关，游戏通关。...
使用Element的InfiniteScroll 无限滚动组件报错的解决
10-15
主要介绍了使用Element的InfiniteScroll 无限滚动组件报错的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element InfiniteScroll无限滚动的具体使用方法
10-15
主要介绍了Element InfiniteScroll无限滚动的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一个妈妈的自我介绍人生感悟精选.doc
10-11
如今，数字绘画软件如Photoshop、Procreate等让艺术家能够更方便地创作，甚至可以通过触屏设备直接用手绘感觉来作画，这与妈妈用手擦画而不是用橡皮的习惯有异曲同工之妙。同时，对于颜色的热爱和对颜料的处理方式，...
php页面无法滚动,php – 为什么这个无限滚动在IE中不起作用？
weixin_30899991的博客
03-22 90
以下代码适用于Chrome和Firefox.对于IE,它会滚动浏览相同的内容.我广泛搜索了一个解决方案,但一无所获.头$(window).scroll(function(){if($(window).scrollTop() == $(document).height() - $(window).height()){$('div#loadmoreajaxloader').show();$.ajax(...
element ui无限滚动 InfiniteScroll 触底分页效果 使用及踩坑
未末的博客
11-22 8068
因为要做下拉触底效果，刚好看到element ui有这个无限滚动插件，就打算用一下，以前写的那个效果不好。 踩坑： 1.刚开始不知道需要安装，所以就直接使用导致报错 Failed to resolve directive: infinite-scroll 2.在直接使用的时候，滑动一直不生效。后来换到别的页面是生效的，反复排查发现在顶级div我用到了v-if，v-if初始值是false，在调用了接口之后才是true，这种情况下滚动不生效 3.可能是由于我页面布局的原因，导致我在使用infinite..
AHooks无限滚动useInfiniteScroll使用
张兴华的博客
05-31 3355
useInfiniteScroll 封装了常见的无限滚动逻辑。假如第一次请求返回数据为 { list: [1, 2, 3] }, 第二次返回的数据为 { list: [4, 5, 6] }, 则我们会自动合并 list，整合后的的 data 为 { list: [1, 2, 3, 4, 5, 6] }。注：这里官方说了对于返回的字段是list，才会帮你进行合并，所以可以跟后端的同学商量返回的数组数据用list做属性名，或者你也可以拿到后端的数据自己生成list属性名。
React 滚动加载--ahooks--useInfiniteScroll
qq_44638443的博客
11-26 1904
React 滚动加载--ahooks--useInfiniteScroll
ahooks.js：一款强大的React Hooks库及其API使用教程（二）
weixin_42662753的博客
08-17 2705
ahooks是一款由阿里巴巴开发团队设计的React Hooks库，提供了一系列实用的React Hooks，以便开发者更好地使用React的功能。ahooks的设计原则是“最小API，最大自由”，旨在提供最小的、最易于理解和使用的API，同时保留最大的使用自由度。ahooks.js：一款强大的React Hooks库及其API使用教程（一）
el-select下拉框懒加载以及搜索联合处理+搜索防抖处理
jianjian_19的博客
12-11 6307
问题描述 现有一个页面，充斥着大量表单元素，首先要知道的是vue对于视图上的更新机制，在一个组件内若有元素发生变动，那么整个组件就会刷新渲染，所以将大量的表单元素放在一个组件内是会造成页面卡顿的现象。如果有下拉框一次性加载大量数据的情况，这个现象会格外的明显。虽然说将表单分割成多个组件会有帮助，但是效果不会很大，必须要解决下拉框一次性加载了大量元素这个根源问题。由于element自身没有对于下拉框(el-select)做懒加载的处理(也可以和element-ui的InfiniteScroll(无限滚动)联合
vue中使用swiper swiper-slide高度不同 高度自适应
周18的碎碎念
03-05 3761
需求： swiper-slide里是组件，俩组件高度不一样，正常写的话，会取最高的组件的高度，这样另一个组件底部就会出现大片空白 解决： autoHeight: true <swiper ref="mySwiper" :options='swiperOptions'> <swiper-slide>1</swiper-slide> <swiper-slide>2</swiper-slide> &lt
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值