这次给大家带来怎样使用react native listview增加顶部下拉刷新和底下点击刷新，使用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);
});
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue.extend实现alert模态框弹窗组件
如何使用vue组件实现弹出框点击显示隐藏
以上就是怎样使用react native listview增加顶部下拉刷新和底下点击刷新的详细内容。