问题
How to know the state of the scroll in FlatList? Like scrolling up or scrolling down? I want to know the state scrolling up or down to show or hide header in FlatList.
回答1:
Use the onScroll property as below. (Official)
<ScrollView onScroll={this._onScroll} />
_onScroll = (event) {
console.log(event.nativeEvent.contentOffset.y);
},
And for guarantee getting the value of scrolling's last frame, you need to set a property scrollEventThrottle={16}
.
回答2:
Actually, the FlatList
component can use ScrollView
props so you can use below code to find out your Y
position of FlatList scrollbar:
<FlatList onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)} ...
You should write it on some variable and compare it with the latest change, then you can understand scrollbar moves to down or up.
Hint: It starts from zero.
回答3:
Normally, the header is called StickyHeader
. And there is already a option called stickyHeaderIndices
which takes the index of child to make sticky header.
Official
<ScrollView
stickyHeaderIndices={[1]}
>
来源:https://stackoverflow.com/questions/53900881/how-to-know-the-state-of-scroll-up-or-down-in-flatlist