网络编程
位置：首页>> 网络编程>> JavaScript>> react-native ListView下拉刷新上拉加载实现代码

react-native ListView下拉刷新上拉加载实现代码

作者：Tomoya　　发布时间：2023-07-02 06:35:34　

标签：reactnative,下拉刷新,上拉加载

本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家，具体如下：

先看效果图

react-native ListView下拉刷新上拉加载实现代码

下拉刷新

React Native提供了一个组件可以实现下拉刷新方法RefreshControl

使用方法


<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
//...
</ListView>

在视图加载的时候的时候，将refreshing设置为true，数据加载完成设置为false即可

上拉加载

利用ListView里的onEndReached方法实现，ListView在滚动到最后一个Cell的时候,会触发onEndReached方法

先在ListView里添加一个Footer


render() {
const FooterView = this.state.loadMore ?
<View style={styles.footer}>
<Text style=>加载更多...</Text>
</View> : null;
return <ListView
refreshControl={
<RefreshControl
 refreshing={this.state.refreshing}
 onRefresh={this._onRefresh.bind(this)}
/>
}
style={[styles.listView]}
dataSource={ds.cloneWithRows(this.state.dataSource)}
enableEmptySections={true}
renderRow={this._renderRow.bind(this)}
onEndReachedThreshold={5}
onEndReached={this._onEndReached.bind(this)}
renderFooter={() => FooterView}
/>
}

在方法_onEndReached里将Footer显示出来，在数据加载完成之后，再隐藏掉Footer


_onEndReached() {
this.setState({
loadMore: true,
pageNo: this.state.pageNo + 1
});
this._fetchData();
}

说明

ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用，它的意思是：像素的临界值，该属性和onEndReached配合使用，因为onEndReached滑动结束的标志是以该值作为判断条件的

来源：https://tomoya92.github.io/2017/08/02/react-native-listview-refresh-loadmore/?utm_source=tuicool&utm_medium=referral

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com