实现的比较简单,原理就是在下一页有数据的情况下,ScrollView底部始终会有一个loading图表和加载中的文字,每次ScrollView滚动到底部时loading部分就会显示出来,然后去请求数据,数据请求回来追加到到列表中,这样loading就又被挤到下面去了。 怎么判断下一页是否有数据呢,就是比较请求后台的长度跟拿回来数据的列表的长度。
比如 ,如果每次请求20条数据,但是结果只返回了5条,那就是下一页没有数据了,这个时候就隐藏loading部分,显示出‘没有更多数据’的提示
ScrollView底部放一个loading —> 滚动到底部调用加载数据请求 —> 判断下一页是否有数据 —>有数据则追加数据,没有则显示没有数据提示
<ScrollView
bounces={false}
removeClippedSubviews={true}
style={{flex: 1}}
onScroll={(evt)=>this.scrollHandle(evt)}
>
<View style={{}}>
{ListView}
</View>
{!this.state.noMoreData&&this.state.list.length != 0&& <View style={styles.loadingCon}>
<ActivityIndicator size="small" color="#ED4F4F" />
<Text style={styles.loadingText}>加载中...</Text>
</View>}
{this.state.noMoreData&&this.state.list.length != 0&&<View>
<Text style={styles.noMoreDataText}>没有更多数据</Text>
</View>}
</ScrollView>
滚动监听方法
scrollHandle(e){
let y = e.nativeEvent.contentOffset.y;
let height = e.nativeEvent.layoutMeasurement.height;
let contentHeight = e.nativeEvent.contentSize.height;
if (y + height >= (contentHeight-0.5)&&this.state.tipslist.length!=0) {
this.queryData()
}
}
上拉加载数据和数据加载情况判断
queryData(){
if (list.length > 0) {
this.setState({
list: [...this.state.list, ...list],
});
} else {
this.setState({
noMoreData:true
})
}
if(list.length < this.state.pagesize){
this.setState({
noMoreData:true
})
}
}