我正在尝试在 FlatList
上实现一些奇怪的功能。我们想要的是,如果 FlatList
延伸到页面之外,页脚应该表现正常 - 即离开屏幕,直到用户滚动足够多以显示它。
但是,如果只有几个项目,并且 FlatList
没有延伸到页面底部之外,我希望页脚显示在底部,而不是紧接在列表之后。我尝试画一些 ASCII 艺术来更好地表达我的意思:
错误:
---------------
| cell1 |
|--------------|
| cell2 |
|--------------|
| footer |
| |
| |
| |
----------------
我想要什么:
---------------
| cell1 |
|--------------|
| cell2 |
|--------------|
| |
| |
| |
| footer |
----------------
有人知道该怎么做吗?重要的是,如果您需要滚动查看某个单元格,则页脚不会位于列表上方,而是仍保留在所有单元格后面。
最佳答案
我今天遇到了同样的问题,但我使用了更好的解决方案。
使用 scrollEnabled={false}
实现的解决方案在处理更多项目时效果不佳,因为 FlatList 需要计算所有子项高度。
文应该像这样:
<FlatList
...
ListFooterComponentStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
contentContainerStyle={{ flexGrow: 1 }}
/>
我放了世博零食给你们测试:https://snack.expo.io/@victorwads/flatlist-with-grow-footer
您可以在零食上放置更多元素来测试更多元素的行为:
<FlatList
data={['', '', '' ,'' ,'' ,'' ,'' ,'' ,'' ,'']}
...
/>
关于reactjs - 如果列表未超出页面,则在底部渲染 FlatList 页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48345587/