请求页面 默认页 https://www.jb51.net/article/139044.htm
【标题】: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>
React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B
);
}
}
载入最新的头部数据添加到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组件中NavigatorIOS和ListView结合使用的方法 react-native ListView下拉刷新上拉加载实现代码 React Native之ListView实现九宫格效果的示例 ReactNative列表ListView的用法 React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
- React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B
测试足球平台出租环境调试app
js缓存足球平台出租加载到app
【标题】:React native ListView 增加顶部下拉刷新和底下点击刷新示例
【内容】:1. 底部点击刷新
1.1 先增加一个按钮
![](http://www.biwenge.com/upload/2018062116/r4hkj5lyknd.jpg)
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>
React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B
);
}
}
载入最新的头部数据添加到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组件中NavigatorIOS和ListView结合使用的方法 react-native ListView下拉刷新上拉加载实现代码 React Native之ListView实现九宫格效果的示例 ReactNative列表ListView的用法 React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
- React%20native%20ListView%20%E5%A2%9E%E5%8A%A0%E9%A1%B6%E9%83%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E5%BA%95%E4%B8%8B%E7%82%B9%E5%87%BB%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B
测试足球平台出租环境调试app
js缓存足球平台出租加载到app