android listview 下拉刷新禁止点击,React native ListView 增加顶部下拉刷新和底下点击刷新示例...

1. 底部点击刷新

1.1 先增加一个按钮

render() {

if(!this.state.data){

return(

Loading...

)

}else{

return(

refreshControl={

refreshing = {false}

onRefresh = {this.reloadWordData.bind(this)}

/>

}

dataSource={this.state.data}

renderRow={(rowData)=>this.renderRow(rowData)}

renderFooter={this.renderFooter.bind(this)}

>

);

}

}

renderFooter(){

return (

onPress={this.addMoreOnFoot.bind(this)}

title="点击载入更多"

/>

)

}

给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(

Loading...

)

}else{

return(

refreshControl={

refreshing = {false}

onRefresh = {this.reloadWordData.bind(this)}

/>

}

dataSource={this.state.data}

renderRow={(rowData)=>this.renderRow(rowData)}

renderFooter={this.renderFooter.bind(this)}

>

);

}

}

载入最新的头部数据添加到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);

});

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。