react-native ListView下拉刷新上拉加载实现代码
作者:Tomoya 时间:2023-07-02 06:35:34
本文介绍了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
标签:reactnative,下拉刷新,上拉加载
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python 搭建简单的http server,可直接post文件的实例
2021-08-25 15:07:39
MySQL性能分析及explain的使用说明
2024-01-28 05:34:50
请不要重复犯我在学习Python和Linux系统上的错误
2023-05-05 05:01:31
![](https://img.aspxhome.com/file/2023/5/71525_0s.png)
PyCharm使用最多也最常用默认快捷键分享
2023-05-23 20:54:55
![](https://img.aspxhome.com/file/2023/9/81579_0s.png)
Python catplot函数自定义颜色的方法
2021-01-29 16:25:01
![](https://img.aspxhome.com/file/2023/1/95491_0s.png)
Django分页功能的实现代码详解
2022-09-27 01:12:08
![](https://img.aspxhome.com/file/2023/1/97521_0s.png)
asp 解析一个xml文件的公用函数集合
2008-02-29 13:40:00
python中如何使用insert函数
2023-08-02 17:04:43
python数据分析之员工个人信息可视化
2023-08-05 02:32:26
![](https://img.aspxhome.com/file/2023/4/64704_0s.png)
详解python基础中的for循环
2021-04-23 07:42:11
![](https://img.aspxhome.com/file/2023/8/88998_0s.png)
如何使用SQL Server中的客户端配置工具
2009-01-13 14:05:00
mysql delete 多表连接删除功能
2024-01-21 15:02:41
python跨文件使用全局变量的实现
2022-03-31 17:24:36
分步骤教你用python一步步提取PPT中的图片
2023-07-01 19:58:22
![](https://img.aspxhome.com/file/2023/8/131608_0s.png)
Python入门篇之面向对象
2023-10-19 16:31:51
python使用pyodbc连接sqlserver
2021-12-24 06:06:17
![](https://img.aspxhome.com/file/2023/1/69031_0s.png)
发一个数字拼图网页游戏
2008-10-12 10:02:00
实现动画效果核心方式的js代码
2024-04-19 10:45:39
MySQL的存储过程写法和Cursor的使用
2008-12-03 15:55:00
mysql单字段多值分割和合并的处理方法
2024-01-16 23:49:00
![](https://img.aspxhome.com/file/2023/2/125672_0s.png)