汕头市通信建设管理局网站惠州市seo广告优化营销工具

简单分享 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 元素一直在追加，那么当数量量比较大的时候，数据渲染上面就会存在问题。