react-native SectionList FlatList上拉分页加载
SectionList、FlatList提供了以下两个接口可供处理分页加载需求:
但是onEndReached有以下bug:
1.第一次渲染时有不必要的调用 :onEndReached在初始渲染后会被调用一次或多次。
2.在当前数据无法铺满一页的情况下,onEndReached会被持续调用,直到满足onEndReachedThreshold条件为止。
切换思路解决上拉分页加载需求:
思路:
onScroll的回调对象event.nativeEvent中:
- contentSize表示整个ScrollView的高度height、宽度width
- contentOffset表示ScrollView在x/y轴上的位移值
- layoutMeasurement表示当前ScrollView容器的高度height、宽度width
如果列表触底,则有:
contentOffset.y + layoutMeasurement.height = contentSize.height
解决:
1 onScroll(event) { 2 let y = event.nativeEvent.contentOffset.y 3 let height = event.nativeEvent.layoutMeasurement.height 4 let contentHeight = event.nativeEvent.contentSize.height 5 if (Math.abs(y + height - contentHeight) < 1) { 6 //Load More 7 } 8 }