使用react 实现一个无限滚动列表

仓库地址:React 无限滚动demo

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

  1. 第一步:给定两个div,实现无限滚动,外层div我们叫它listWrapper,内层div我们叫它list

  2. 第二步:往子div中加列表项(固定项数),我们叫它cell,滚动的时候不断调整cell的定位top值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容