React native ListView 增加顶部下拉刷新和底下点击刷新示例
更新时间:2018年04月27日 11:57:06 作者:瓦力
这篇文章主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
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); }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术,为开发者提供了快速、便捷的部署方案,本文主要介绍了Docker部署SpringBoot项目到云服务器,具有一定的参考价值,感兴趣的可以了解一下2024-01-01React中useCallback useMemo使用方法快速精通
在React函数组件中,当组件中的props发生变化时,默认情况下整个组件都会重新渲染。换句话说,如果组件中的任何值更新,整个组件将重新渲染,包括没有更改values/props的函数/组件。在react中,我们可以通过memo,useMemo以及useCallback来防止子组件的rerender2023-02-02
最新评论