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