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 }

 

posted @ 2019-12-10 20:51  哈佬  阅读(1649)  评论(0编辑  收藏  举报