如何在flatlist中应用延迟加载

1 回答

• 3

  你应该用

  <FlatList ....
  onEndReached={this.endReached}
  onEndReachedThreshold={.7}
  .../>
  

  onEndReached ：当滚动位置在渲染内容的onEndReachedThreshold内时调用一次 .

  和 onEndReachedThreshold ：距离末尾多远（以列表的可见长度为单位）列表的下边缘必须来自内容的末尾才能触发onEndReached回调 . 因此，当内容的结尾在列表的可见长度的一半之内时，值0.5将触发onEndReached .

  例如：

  class YourClass extends Component {
    state = { list: [], offset: 0, limit: 100 };
    componentDidMount() {
        this.fetchResult();
    }
      fetchResult = () => {
          const { offset, limit, list } = this.state;
          fetchModeDateFromAPI(offset, limit).then(res => {
          if (!res.list) return;
          this.setState({
              list: list.concat(res.list),
              offset: offset + 100,
              limit: limit + 100
          });
          });
      };
      render = () => {
          return (
          <FlatList
              style={{ flex: 1 }}
              extraData={this.state}
              onEndReached={this.fetchResult}
              onEndReachedThreshold={0.7}
              data={this.state.list}
              renderItem={rowData => {}}
              keyExtractor={item => item.id.toString()}
          />
          );
      };
  }
  

  回复于 2024-04-16T23:59:28+08:00