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