FlatList 数据绑定 及上拉加载实现

3,727 阅读2分钟

FlatList 数据绑定 及上拉加载实现

官方没有提供上拉加载组件,可以通过 FlatList的onEndReached与onEndReachedThreshold属性来实现相应效果。

思路

参考网址 blog.csdn.net/teagreen_re…

当FlatList滑动到底部时,页面数加一,触发请求新一页的网络数据 调用 _onEndReached,更新到组件state中的数据源userLsit中,userLsit也作为FlatList的数据源data。实现滑动到底部触发网络请求通过FlatList的onEndReached和onEndReachedThreshold属性,onEndReached是在当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 实现默认点击查询按钮时默认查询第一页数据 调用方法getFirstPage

数据查询部分使用leanCloudSDK,leanCloud JavaScript-SDK帮助类


  • 首先设置页面state

    this.state = {
          msg: this.props.msg, 
          userLsit: [], // FlatList 数据源
          loading: false, // 控制加载动画显示
          total: 0, //查询到的总记录数
          showFoot: 0, // 控制foot, 0:隐藏footer  1:已加载完成,没有更多数据   2 :显示加载中
          // isRefreshing: false,//上拉刷新
          filters: { // 查询条件
            username: '',
            limit: 10, //每次加载数量
            currpage: 1 // 当前页
          }
        }
  • FlatList头部组件 ListHeaderComponent={this._header}//header头部组件

_header = function () {
    return (
      <View style={{
        justifyContent:'flex-start',
        flexDirection: 'row',
      }}>
        <Label style={styles.header} text= '姓名' />
        <Label style={styles.header} text= '校区' />
        <Label style={styles.header} text= '手机' />
        <Label style={styles.header} text= '职位' />
        <Label style={styles.header} text= '状态' />
        <Label style={styles.header} text= '添加时间' />
      </View>
    )
  }
  • 尾部组件ListFooterComponent={this._renderFooter.bind(this)} // 尾部组件

_renderFooter(){
    if (this.state.showFoot === 1) {
        return (
            <View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
                <Label style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
                    没有更多数据了
                </Label>
            </View>
        );
    } else if(this.state.showFoot === 2) {
        return (
            <View style={styles.footer}>
                <Label>正在加载更多数据...</Label>
            </View>
        );
    } else if(this.state.showFoot === 0){
        return (
          <View style={styles.footer}>
              <Label />
          </View>
        );
    }
  }
  • 分割线组件 ItemSeparatorComponent={ItemDivideComponent} // 分割线移入外部自定义组件

import React, {Component} from 'react';
import {View} from 'react-native';
/**
 * 分割线
 */
class ItemDivideComponent extends Component {
  render() {
    return (
      <View style={{height: 1, backgroundColor: 'lightblue'}}/>
    );
  }
};
export default ItemDivideComponent
  • refreshing = {this.state.loading} 在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。

  • onRefresh ={() => {return;}} // 下拉刷新 如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性 refreshing 和 onRefresh 要配合使用

  • onEndReachedThreshold 和 onEndReached 配合使用实现上拉加载数据

    onEndReachedThreshold= {0.2} onEndReached = {this._onEndReached.bind(this)} // 下拉刷新

  • 数据查询方法

_onEndReached(){
    let filters = this.state.filters;
    if(filters.currpage * filters.limit >= this.state.total) {
      this.setState({showFoot:1});
      return;
    }
    filters.currpage ++;
    this.setState({filters:filters, showFoot:2})
    //获取数据
    this.getUserLsit();    
  }
  getFirstPage () {
    let filters = this.state.filters;
    filters.currpage = 1;
    this.setState({filters: filters});
    this.getUserLsit();
  }
  getUserLsit () {
    let params = [
      {colName: 'username', value: this.state.filters.username, queryType: 'contains'}
    ]
    this.setState({loading: true})
    // console.warn(this.state.filters)
    LeancloudHelp.getList('_User', params,this.state.filters.limit,this.state.filters.currpage).then(res => {
      if (this.state.filters.currpage === 1) {
        this.setState({userLsit: res.data})
      } else {
        this.setState({userLsit: this.state.userLsit.concat(res.data)})
      }
      this.setState({total: res.total})
      if(this.state.filters.currpage * this.state.filters.limit >= res.total) {
        this.setState({showFoot:1});
      } else {
        this.setState({showFoot:2});
      }
      this.setState({loading: false})
    }).catch(err => {
      console.error(err)
    })
  }

本笔记为学习笔记,文中用的部分组件为teaset