当前位置: 首页 > article >正文

element-ui infiniteScroll 组件源码分享

简单分享 infiniteScroll 组件源码,主要有以下四个方面:

1、infiniteScroll 页面结构。

2、infiniteScroll 组件属性。

3、组件内部的方法。

4、存在的问题。

一、infiniteScroll 页面结构:

二、页面属性。

2.1  infinite-scroll-disabled 是否禁用,boolean 类型,默认 false。

getScrollOptions 方法,整合传入的属性,返回最新的 attributes 对象。

2.2 infinite-scroll-delay 属性,节流延迟,单位 ms,默认 200。

2.3 infinite-scroll-distance 属性, 触发加载的距离阈值,单位 px,默认 0。

2.4 infinite-scroll-immediate 属性, 是否立即执行加载方法,以防止初始状态下内容无法充满容器,默认 true。

 三、组件内部的方法:

3.1 getStyleComputedProperty  获取指定元素的dom 样式。

3.2 getScrollOptions 获取传入的属性。

3.3 handleScroll 核心方法,滚动的方法,判断何时需要加载,使用 MutationObserver 方法监听容器变化。

四、存在的问题:

4.1 滚动时加载时,dom 元素一直在追加,那么当数量量比较大的时候,数据渲染上面就会存在问题。


http://www.kler.cn/a/566711.html

相关文章:

  • 三轴加速度推算姿态角的方法,理论分析和MATLAB例程
  • Linux网络数据包接收:原理、流程与优化策略
  • Linux:同步
  • 【微知】git log如何将每次提交按照一行查看?(git log --oneline)
  • unity lua属性绑定刷新
  • C++ 设计模式 十一:代理模式 (读书 现代c++设计模式)
  • MySQL 和 Elasticsearch 之间的数据同步
  • docker里面pgadmin4自动备份pg数据库操作
  • NIM平台开发基于提示工程的大语言模型(LLM)应用
  • 笔记20250225
  • IP-----双重发布
  • 使用PDFMiner.six解析PDF数据
  • 【Rust中级教程】题外话:Rust + Python联合编程(基于Maturin)
  • 城电科技|会追日的智能花,光伏太阳花开启绿色能源新篇章
  • 一个便捷的web截图库~
  • 回溯算法(C/C++)
  • mysql中事务的基本概念
  • 开源PDF解析工具olmOCR
  • next.js-学习3
  • USRP4120-通用软件无线电平台