大气物流网站源码/高端营销型网站-专业网站定制开发

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)})}
复制代码