如何在上下兩個方向上進行無限滾動。我正在使用InfiniteLoader和List,兩者都是react-virtualized組件。我有一個具有初始日期時間範圍的時間戳列表。從那裏的名單應該是無限的雙向。目前,向下滾動到列表底部將觸發函數_loadMoreRows()。但是,我想在向上滾動時觸發具有相同功能的_loadMoreRows()。react-virtualized InfiniteLoader在兩個方向上,頂部和底部
2
A
回答
1
我現在工作:)一切都很好。 <InfiniteLoader>
的threshold
道具定義在預取數據時的開始/結束之前的索引的閾值數量,即,觸發器_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
丙應該被設置爲列表的中間,即rowCount/2
。這個數字應該滿足等式
0 + threshold < scrollToIndex < rowCount - 1 - threshold.
功能_isRowLoaded()
將檢查loadedRowsMap[index]
。如果它設置爲STATUS_LOADED
或STATUS_LOADING
(在InfiniteLoader
中使用的內部常量),它將不會觸發_loadMoreRows()
。如果它設置爲undefined
,則它將觸發_loadMoreRows()
。
使用此設置,觸發_loadMoreRows()
在兩個滾動方向上,向上和向下都起作用。
相關問題
- 1. Android - FrameLayout有兩行 - 頂部和底部?
- 2. 頂部div出現在底部和底部到頂部
- 3. 頂部和開方的底部編號
- 4. 我有兩個admob廣告頂部和底部在android
- 5. 位置在兩個單獨的div的頂部和底部
- 6. 對齊兩個標籤的底部和頂部在垂直UIStackView
- 7. 頂部和底部邊框
- 8. 兩條線,底部和頂部,在H2的兩側
- 9. 如何在div上創建兩個滾動條作爲頂部和底部?
- 10. SQL - 兩個表之間的查詢(頂部和底部)
- 11. 如何製作兩個div頂部和底部
- 12. 如何在點擊頂部/左/右/底部方向滑動div
- 13. 在屏幕頂部和底部的LinearLayout
- 14. TextView重疊在頂部和底部
- 15. 對齊在DIV頂部和底部
- 16. 團結zfighting或對象爬上對方的頂部和底部?
- 17. 在屏幕上淡出div的頂部和底部部分
- 18. 浮動底部和向上
- 19. UIGestures從兩手指向下滑動從頂部到底部
- 20. VideoDisplay和頂部和底部的黑色
- 21. 滾動頂部,然後底部,然後頂部,然後底部
- 22. jQuery Animate頂部(從底部到頂部)
- 23. 如何對頂部,底部和兩側(水平和垂直)
- 24. 從頂部和底部以及從底部到頂部拉伸div高度
- 25. 動作吧喜歡evernote - 向上按鈕和標籤在頂部與頂部的菜單動作在底部
- 26. 兩個動作欄(底部和上部)在同一時間?
- 27. 3 Div的上方中部和底部
- 28. 雙背景圖像頂部和底部
- 29. SQL update語句頂部和底部行
- 30. BackgroundResource邊框的頂部和底部