How to know the state of scroll (up or down) in FlatList?

≡放荡痞女 提交于 2021-02-18 19:44:55

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!