ElementUI中InfiniteScroll无法控制自动加载问题的解决

最新推荐文章于 2024-06-19 17:22:26 发布
最新推荐文章于 2024-06-19 17:22:26 发布
阅读量1.1w 收藏 16
点赞数 5
分类专栏： Element-UI 文章标签： element infinitescroll 自动加载 scroll 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangshuaionline/article/details/105760609
版权
InfiniteScroll官方文档使用官方文档中的禁用加载例子来说明 <div class="first_left"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scr...
摘要由CSDN通过智能技术生成

InfiniteScroll官方文档

使用官方文档中的禁用加载例子来说明

	<div class="first_left">
      <ul
        class="list"
        v-infinite-scroll
最低0.47元/天 解锁文章
楊帥
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）
u012169390的博客
10-28 6603
v-infinite-scroll（Element UI） 滚动到底不触发（笔记本）现象先答案原因解决思路1、设置滚动元素的padding2、反复设置padding放弃，查看数据层3、读源码其他尝试1、可能是disabled 传值为false2、dom之间的嵌套关系、padding、margin3、嵌套了draggable 现象 1.我用14寸win笔记本开发连普通屏幕正常，测试用的笔记本（1920 分辨率，150%缩放）测出此问题 2.用chrome调试工具测试不同分辨率，某些分辨率偶尔复现此问题，小于
浅谈element中InfiniteScroll按需引入的一点注意事项
11-20
大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。 针对前面element 按需引入的一些配置这里就不再详细介绍了。 那么这里讲的是在main.js写入以下...
开发小结-elementui无限滚动组件踩坑使用
eqizhihui的博客
09-11 344
前提需求：下滑（滑动到底部）刷新列表数据，每下滑一次增加10条数据，初次进入不需要加载。踩坑过程：使用了elementUI中的无限滚动组件，根据其文档中的禁用加载例子修改代码。针对第二个问题，解决方法是给v-for所在元素的父元素设置overflow为auto。针对第一个问题，解决方法是。
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效 的 解决方案
一个努力学习的程序猿
10-20 6605
Vue 项目使用 InfiniteScroll 无限滚动组件在部分浏览器失效，转而使用 JS 去实现无限滚动及其相关问题的解决方案
element UI中 InfiniteScroll 无限滚动 组件触底失效问题排查
最新发布
工作中遇到问题记录
06-19 369
element UI中 InfiniteScroll 无限滚动 组件触底失效问题排查
InfiniteScroll 解决自动无限加载
qq_43421760的博客
08-24 749
注意在滚动层外部需要给定高度，我给的是最高高度maxHeight：900px，infinite-scroll-distance="20"是离页面最底部20px时触发加载新数据。
列表无限加载---elementPlus提供的v-infinite-scroll指令
aliven1的博客
08-16 352
elementPlus提供的v-infinite-scroll指令。
v-infinite-scroll element-plus无限加载
qq_52214334的博客
05-31 377
今天在用element-plus做商品无限加载的时候，看了一下文档，觉得挺简单的，商品是我自己封装的一个组件，直接给整个组件添加了v-infinite-scroll指令，然后打开浏览器看了下，每次我一滚动鼠标 就会触发，直接干到报错，把服务器弄干卡了，后来一直没找到问题，网上各种搜，还是没有找到问题，最后发现我将指令绑定再商品盒子上！怪不得只要一滚动鼠标就触发，
【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效
zdz的博客
12-16 463
【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效
Element InfiniteScroll无限滚动的具体使用方法
12-28
<ul class=infinite-list v-infinite-scroll=load> <li v-for=i class=infinite-list-item>{{ i }} [removed] export default { data () { return { count: 0 } }, methods: { load () { this.count +...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
在 Vue 和 ElementUI 中实现滚动懒加载主要涉及以下知识点： 1. **Vue 数据绑定与组件化**： Vue 的核心特点是数据驱动视图，通过 `data` 定义状态，然后在模板中使用 `v-bind` 或简写 `:` 将数据绑定到元素上。...
解决vue elementUI中table里数字、字母、中文混合排序问题
01-19
使用elementUI中的table时，给包含数字字母中文的名称等字段排序 例如：数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z） 2.代码解析 tooltip-effect=dark class=xg-table xss=removed max...
element-ui的InfiniteScroll组件一直触发加载。
weixin_44012722的博客
07-24 6439
解决方法： 包含的UI 需要设置固定的高度，或者与视图同高，height：100%
mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案
p15097962069的博客
12-26 304
mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案
v-infinite-scroll 只在页面加载后触发一次 || 滚轮划到低端时不触发 的问题
天道酬勤
09-18 7244
环境：Nuxt+ElementUI 问题：使用瀑布流加载，但是只在页面加载完毕后触发一次，之后再不触发 解决方式：将 v-infinite-scroll=“loadMore” 放在一个更大的标签下 ...
记录 v-infinite-scroll=“load“ 在f12关闭的情况下不触发解决办法
一个超爱喝可乐的web前端攻城狮
09-08 470
直接上答案 , 后续看了源码发现问题会继续更新为什么要加 这个 1。
Mint-ui infinite scroll 无限加载爬坑之路
李水灵的博客
11-08 9563
参考：https://blog.csdn.net/sinat_40257787/article/details/79582130 问题一：下拉不会触发loadMore事件 解决：我们的ul或者设置滚动的元素必须设置高度和溢出滚动的属性 因为我的接口没有分页所以用slice模拟数据分页加载 CSS代码： .newsList { max-height: 35rem; o...
Ant Design Mobile RN 使用加载中......
欢迎进入小洋的博客！
03-26 655
import { Toast } from '@ant-design/react-native'; getData = () => { // 创建加载 this.key = Toast.loading('加载中...', 0, null, false); try { // 获取数据,等待加载中... ...... // 获取成功完成加载 Toast.remove(this.key); } catch (e.
在一个组件中使用elementUI的InfiniteScroll 无限滚动
05-26
可以按照以下步骤在一个组件中使用elementUI的InfiniteScroll无限滚动： 1. 首先，在组件中引入InfiniteScroll组件： ```javascript import { InfiniteScroll } from 'element-ui'; ``` 2. 在组件的mounted钩子函数中初始化InfiniteScroll，设置需要监听滚动事件的元素和触发滚动事件的回调函数： ```javascript mounted() { this.$refs.container.addEventListener('scroll', this.handleScroll); this.$refs.container.addEventListener('touchmove', this.handleScroll); this.$refs.container.addEventListener('mousewheel', this.handleScroll); this.$refs.container.addEventListener('DOMMouseScroll', this.handleScroll); }, directives: { InfiniteScroll }, methods: { handleScroll() { if (this.$refs.container.scrollTop + this.$refs.container.clientHeight >= this.$refs.container.scrollHeight) { // 触发滚动事件后的回调函数 } } } ``` 3. 在需要监听滚动的元素上，添加v-infinite-scroll指令，并设置回调函数： ```html <el-container ref="container" v-infinite-scroll="handleScroll"> <!-- 内容 --> </el-container> ``` 这样，当滚动到底部时，就会触发回调函数，从而实现无限滚动效果。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值