使用react 实现一个无限滚动列表
2020-06-24 本文已影响0人
_志铭
仓库地址:React 无限滚动demo
整体思路:通过定位将列表项展示在可视区域。滚动时,列表项dom不增加,增加包裹div的高度,动态调整列表项定位的top值来达到无限加载的目的 。这个实现方案让我想到一个场景,阿里有严格的分层等级,比如p7、p6、外包分的很开,我觉得这个场景非常贴切。p7(listWrapper)领着p6(list),p6带着几个外包(cell)做项目,外包数量固定。项目开始...,p7啥也不干,专门负责监视p6(监听scroll事件),p6负责安排外包开发项目,慢慢的一个又一个的项目完成了,外包还在不断的在各个项目滚动,p6这边完成东西越积越多(height随着滚动变高),也实时反反应到p7这边(滚动条)。如果p7要来看看之前做的项目的话(往回滚动),只需要外包找到对应的项目(找准数据回填)展示出来即可。当然有很多环节需要优化,比如p7一直催项目完成情况,但是p6可以选择隔一段时间上报工作情况(节流)。演示组件 scrollList
-
第一步:给定两个div,实现无限滚动,外层div我们叫它listWrapper,内层div我们叫它list
-
第二步:往子div中加列表项(固定项数),我们叫它cell,滚动的时候不断调整cell的定位top值