React Native FlatList 避免上拉加载多次触发

1.设置onEndReachedThreshold(决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。)

onEndReachedThreshold={0.2}

 亲测添加此属性可以避免出现下拉刷新触发上拉加载的问题。

2.在onMomentumScrollBegin属性中监听是否触发滚动(滚动动画开始时调用此函数)

  • 将onMomentumScrollBegin属性添加到您的FlatList列表声明中。
 <FlatList
    data={this.props.data}
    onEndReached={...}
    onEndReachedThreshold={0.5}
    ...
    onMomentumScrollBegin={() => { 
        this.onEndReachedCalledDuringMomentum = false;     
    }}
 />
  • 修改你的onEndReached回调,每次动量只触发一次数据获取。 
 onEndReached = () => {
    if (!this.onEndReachedCalledDuringMomentum) {
      //TODO:此处添加处理上拉加载方法
      this.onEndReachedCalledDuringMomentum = true;
    }
  };
发布了36 篇原创文章 · 获赞 64 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/u010379595/article/details/86614655