无限滚动 – 反应虚拟化的InfiniteLoader在两个方向,顶部和底部
发布时间:2020-12-15 20:11:33 所属栏目:百科 来源:网络整理
导读:如何在两个方向上,向上和向下进行无限滚动.我使用的是InfiniteLoader和List,两者都是反应虚拟化的组件.我有一个带有初始日期时间范围的时间戳列表.从那里列表应该在两个方向上是无限的.目前,向下滚动到List的底部将触发函数_loadMoreRows().但是,我想在向上
如何在两个方向上,向上和向下进行无限滚动.我使用的是InfiniteLoader和List,两者都是反应虚拟化的组件.我有一个带有初始日期时间范围的时间戳列表.从那里列表应该在两个方向上是无限的.目前,向下滚动到List的底部将触发函数_loadMoreRows().但是,我想在向上滚动时触发具有相同功能的_loadMoreRows().
解决方法
我现在有工作:)一切都很好. < InfiniteLoader>的阈值支柱.在List的开始/结束之前定义何时预取数据的索引的阈值数,即trigger_loadMoreRows().
在初始数据获取之后,this.state.items中的第一个和最后一个项应将其对应的loadedRowsMap设置为undefined. const items = _getItems(); // fetch items const rowCount = items.length; const loadedRowsMap = []; _.map(this.state.loadedRowsMap,(row,index)=>{ const status = (index===0 || index===rowCount-1) ? undefined : STATUS_LOADED; loadedRowsMap.push(status)}); scrollToIndex = parseInt(rowCount/2,10); this.setState({ items,rowCount,loadedRowsMap,scrollToIndex,}); 在显示列表之前,< List>的scrollToIndex prop.组件应设置为列表的中间,即rowCount / 2.这个数字应该满足等式 0 + threshold < scrollToIndex < rowCount - 1 - threshold. 函数_isRowLoaded()将检查loadedRowsMap [index].如果它设置为STATUS_LOADED或STATUS_LOADING(在InfiniteLoader中使用的内部常量),它将不会触发_loadMoreRows().如果将其设置为undefined,则会触发_loadMoreRows(). 使用此设置,trigering _loadMoreRows()可在两个滚动方向上下运行. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |