React native ListView 增加顶部下拉刷新和底下点击刷新
发布时间:2020-12-15 06:29:07 所属栏目:百科 来源:网络整理
导读:1. 底部点击刷新 1.1 先增加一个按钮 render() { if(!this.state.data){ return( TextLoading... /Text ) }else{ return( ListView refreshControl={ RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} / } dataSource={th
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'],}) } }) .catch((error)=>{ alert(error); }); } react-native (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |