FlatList 資料繫結 及上拉載入實現

backlight發表於2018-06-13

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


相關文章