zoukankan      html  css  js  c++  java
  • 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 }
  • 相关阅读:
    LeetCode(6. Z 字形变换)
    二分查找
    线性查找
    平安寿险Java面试-社招-四面(2019/08)
    希尔排序
    中移物联网Java面试-社招-三面(2019/07)
    插入排序
    选择排序
    冒泡排序
    八皇后问题
  • 原文地址:https://www.cnblogs.com/halao/p/12019105.html
Copyright © 2011-2022 走看看