关于瀑布流:瀑布流自实现思想及踩坑记录
工作我的项目实现瀑布流向上滚动到顶加载上一页，向下滚动到底加载下一页。依据最小高度优先排列。 设计思维v1: 一开始需要只有向下滚动到底加载下一页，默认初始加载第一页。从左到右从上到下排列。判断滚动条达到底部发出请求加载下一页。列数不是固定的，依据window的宽度跟单卡宽度的比照确定以后展现的列数，依据列数循环加载单卡，设置单卡的top和left款式。left能够间接依据index和列数来确定。top须要计算当前列之前数据的高度总和。v2: 单卡中图片的高度差距较大导致在每列数据个数雷同的状况下，高度差有可能很大。界面不美观。需要更新为按以后高度最小列排放数据。多增加了一个记录高度的数组变量，渲染也变成了优先渲染列数的div，每列div渲染该列的数据。须要先依据列数将以后已存在的数据结构变更成二元数组，不便后续渲染。每列的div只用依据列数设置left，每列中的数据只用依据当前列该数据之前的数据高度和来设置top。v3: 列表模式和网格模式切换时，牵扯到数据更新的问题。需要设定，列表模式跳转到网格模式时，网格模式应该对应显示当前页，即列表模式为第三页则网格模式显示第三页。需要减少向上滚动到顶加载上一页的性能。 抉择的计划监控滚动条的计划：onScroll办法，用Ref绑定滚动条组件范畴。用钩子生成onScroll监控滚动条变动时进行函数内操作。也就是说，每次检测到滚动条变动都会去判断是否达到顶部或者达到底部，进而进行申请和数据更新。如果是上一页的数据，须要将新数据增加到原有数据之前并从新进行排列和渲染，如果是下一页数据，须要将新数据增加到原有数据之后，只须要排列渲染新数据。 遇到的问题如果只在页面初始加载时生成一次onScroll，后续绑定事件不会更新，只会有限加载第二页，useEffect闭包问题。若每次检测到滚动条变动就生成一次onScroll就须要防抖计划。scrollTop + clientHeight 与 scrollHeight 达到底部时会呈现不出名的0.几的误差，问题临时不晓得是为什么。会导致经常出现滚动条到底部但未能触发到底部操作的问题。所以通过判断时scrollHeight - 1来解决，然而这样就有一个新问题。本来只有到scrollTop + clientHeight >= scrollHeight这个节点才会触发一次onScroll到底操作，当初因为这1高度的差值导致在这1高度中会呈现反复申请的问题，会呈现一次加载多页但加载不齐全问题，须要防抖或者管制申请完结前不会再次触发申请。在页面加载最初一页时，有可能会因为数据有余而导致渲染高度不够未呈现滚动条的状况，无奈进行滚动条触发申请。所以在判断当前页为最初一页时，判断列最大高度是否超过scrollHeight，如果未超过，则给他底部增加填充div用来撑起页面使滚动条显示。在页面初始渲染胜利时，不论是在哪一页，滚动条都默认是顶部。在不触发向下滚动操作时，无奈向上滚动，无奈进行加载上一页的申请。所以在页码非第一页时，给顶部填充10px的div并将滚动条设定在10px的高度。使得视觉上和原来没有区别，并且有肯定向上滚动区间去触发加载上一页操作。因为未留神，用index值来作为列的key值导致从新渲染页面时，会呈现上一次数据的残留冗余。其余办法间接在滚动条所在div中应用onScrollCapture来监控滚动条变动，不会有闭包问题，也没有呈现高度差问题。用现有的上拉加载下拉刷新组件（尝试、学习中）