React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018-04-27 11:57
751 查看
1. 底部点击刷新
1.1 先增加一个按钮
render() { if(!this.state.data){ return( <Text>Loading... </Text> ) }else{ return( <ListView refreshControl={ <RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} /> } dataSource={this.state.data} renderRow={(rowData)=>this.renderRow(rowData)} renderFooter={this.renderFooter.bind(this)} > </ListView> ); } } renderFooter(){ return ( <View style={{marginVertical: 10, marginBottom:20}} > <Button onPress={this.addMoreOnFoot.bind(this)} title="点击载入更多" /> </View> ) }
给ListView 增加一个renderFooter 方法来绘制底部元素。在里面显示一个按钮。
按钮处理逻辑:
addMoreOnFoot(){ // alert('addMoreOnFoot') // console.log('addMoreOnFoot') const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0' fetch(url) .then((response)=>response.json()) .then((jsondata)=>{ if (jsondata.data && jsondata.data.length > 0){ const rowData = this.state.jsondata.concat(jsondata.data); this.setState({ footLastId:jsondata.data[jsondata.data.length - 1]['id'], jsondata:rowData, data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData), }) } }) .catch((error)=>{ alert(error); }); }
点击后进行网络处理,把之前最后一条id也传给服务器,让服务器返回这个id后面的20条记录。然后重新setState即可。
2. 头部下拉刷新
ListView中增加RefeshControl
render() { if(!this.state.data){ return( <Text>Loading... </Text> ) }else{ return( <ListView refreshControl={ <RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} /> } dataSource={this.state.data} renderRow={(rowData)=>this.renderRow(rowData)} renderFooter={this.renderFooter.bind(this)} > </ListView> ); } }
载入最新的头部数据添加到this.State中
reloadWordData(){ // alert(this.state.topLastId) const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1' fetch(url) .then((response)=>response.json()) .then((jsondata)=>{ if (jsondata.data && jsondata.data.length > 0){ const rowData = jsondata.data.concat(this.state.jsondata); this.setState({ topLastId:jsondata.data[0]['id'], jsondata:rowData, data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData), }) } }) .catch((error)=>{ alert(error); }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- react-native中ListView组件点击跳转的方法示例
- React Native 自定义下拉刷新上拉加载的列表的示例
- ReactNative ListView改变数据源,列表不刷新
- React-native IT喵~ ScrollView 嵌套ListView 如何实现上拉加载、下拉刷新
- React-Native应用ListView实现上拉下拉刷新效果实践
- React-native ListView 必须点击屏幕才会加载数据
- react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)
- Android 自定义ListView实现底部分页刷新与顶部下拉刷新
- react-native ListView下拉刷新上拉加载实现代码
- react native listview 实现下拉刷新(RefreshControl)
- React-Native 之 GD (十八)监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
- Android 自定义ListView实现底部分页刷新与顶部下拉刷新
- React-Native|实现ListView下拉刷新加载更多
- react native listview上拉加载更多下拉刷新兼容ios 安卓
- Listview下拉刷新(顶部刷新)
- ReactNative ListView + 上拉加载更多 + 下拉刷新
- React-Native学习笔记 使用ListView加载网络数据
- Ubuntu开发React-Native之代码刷新解决方案