参考
componentDidMount() {
this.requestData();
}
refreshData() {
this.totalPage = 0;
this.pageNo = 0;
this.dataSource = [];
this.setState({
isRefresh:true
},() =>{
this.requestData()
})
}
requestData() {
if (this.state.inputText) {
this.props.searchListRequest({
page: this.pageNo,
size: 10,
name: this.state.inputText,
tags: this.state.inputText
})
} else {
this.props.queryFindMoreRequest({
page: this.pageNo,
size: 10,
tags: this.props.loginData.tags
});
}
}
render() {
const {navigation, clubQueryFindMoreState} = this.props;
if (clubQueryFindMoreState.status === CLUB_QUERY_FIND_MORE_SUCCESS) {
//计算总共多少页,尾部显示没有数据
this.totalPage = clubQueryFindMoreState.result.total / 10;
//尾部显示和刷新菊花设置
this.setState({showFoot: this.pageNo > this.totalPage ? 1 : 0,isRefresh:false});
//加载更多的数据拼到后面
clubQueryFindMoreState.result.data.map((item, index) => {
this.dataSource.push(item)
});
this.props.queryFindMoreEnd();
} else if (clubQueryFindMoreState.status === CLUB_SEARCH_LIST_SUCCESS) {
this.totalPage = clubQueryFindMoreState.result.total / 10;
this.setState({showFoot: this.pageNo > this.totalPage ? 1 : 0,isRefresh:false});
clubQueryFindMoreState.result.data.map((item, index) => {
this.dataSource.push(item)
});
this.props.searchListEnd();
} else if (clubQueryFindMoreState.status === CLUB_QUERY_FIND_MORE_ERROR || clubQueryFindMoreState.status === CLUB_SEARCH_LIST_ERROR) {
console.log('err: ' + clubQueryFindMoreState.message);
} else {
}
return (
<FlatList
renderItem={this._renderItem.bind(this)}
data={this.dataSource}
keyExtractor={this._keyExtractor}
extraData={this.state}
showsVerticalScrollIndicator={false}
ItemSeparatorComponent={this._separator}
//下拉刷新相关
onRefresh={() => this._onRefresh()}
refreshing={this.state.isRefresh}
//加载更多
onEndReached={this._onEndReached.bind(this)}
onEndReachedThreshold={1}
ListFooterComponent={this._renderFooter.bind(this)}
/>
)
}
_onRefresh() {
this.refreshData()
}
_onEndReached() {
//如果是正在加载中或没有更多数据了,则返回
if (this.state.showFoot != 0) {
return;
}
//如果当前页大于或等于总页数,那就是到最后一页了,返回
if ((this.pageNo != 1) && (this.pageNo >= this.totalPage)) {
return;
} else {
this.pageNo++;
}
//底部显示正在加载更多数据
this.setState({showFoot: 2});
//获取数据
this.requestData()
}
_renderFooter() {
if (this.state.showFoot === 1) {
return (
<View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
<Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>
没有更多数据了
</Text>
</View>
);
} else if (this.state.showFoot === 2) {
return (
<View style={{height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}>
<ActivityIndicator/>
<Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>正在加载更多数据...</Text>
</View>
);
} else if (this.state.showFoot === 0) {
return (
<View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
<Text></Text>
</View>
);
}
}