相信有很多小伙伴发现antd-mobile中的下拉刷新组件，也发现例子挺难的，其实这个组件并没有那么复杂，只是demo例子不好理解，给大家提供一个简单的demo，或许可以帮到你
上拉刷新下拉加载
- 因为它用react-dom做操作了，所以把react-dom也导进来
- rowID是每次的ID，rowData是每次的数据
- renderSseprator就是个分隔符
- this.state.dataSource就是数据源
- 外围的那个const的dataSource是一种数据结构，它有一个方法叫cloneWithRows
- Button没用，删就完了
- renderFooter是为了做上拉刷新时的Loading效果
- 第一步是通过dataSource去拿数据，第二步是通过render(row)去渲染那个模板
- rowData是每一页的数据，就是每次装载进来的数据，rowID是它帮你封装好的，直接在key={rowID}用就行，
在DidMount整完数据以后在这边的rouData就是你的state.dataSource里面的数据(第一页)
- renderSeparator 就是刚开始他们行和行之间的分隔符
- pageSize是刷新的时候一次显示几条数据
附上代码，可直接复制过去，根据你的需求更改
import React,{ Component } from 'react'
import ReactDOM from 'react-dom' //下拉刷新组件依赖react-dom，所以需要将其引进来
import { PullToRefresh, ListView } from 'antd-mobile';
class ListContainer extends Component {
constructor(props) {
super(props);
const dataSource = new ListView.DataSource({ //这个dataSource有cloneWithRows方法
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.pageNo = 0 //定义分页信息
this.state = {
dataSource,
refreshing: true,
isLoading: true,
height: document.documentElement.clientHeight,
useBodyScroll: false,
hasMore: true
};
}
componentDidUpdate() {
if (this.state.useBodyScroll) {
document.body.style.overflow = 'auto';
} else {
document.body.style.overflow = 'hidden';
}
}
async componentDidMount() {
const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
this.rData = (await this.genData()).sceneryinfo;
console.log(this.rData)
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
height: hei,
refreshing: false,
isLoading: false,
});
}
genData(){ //请求数据的方法
this.pageNo++ //每次下拉的时候pageNo++
return fetch('/scenery/json/scenerynearycitylist.html?CountryId=0&ProvinceId=3&CityId=53&LbTypes=&sorttype=0&page='+this.pageNo+'&gradeid=0&themeid=0&pricerange=0&issearchbytimenow=0&paytype=0&range=0&keyword=0&IsGlobal=0&IsYiYuan=0&cityArea=0&lat=0&lon=0',
{
method: 'GET',
headers: {
'content-type': 'application/json'
},
})
.then(response => response.json())
.then(function(result) {
if(result){
return result
}else{
this.setState({
hasMore: false
})
}
})
}
onRefresh = () => {
// this.setState({ refreshing: true, isLoading: true });
// // simulate initial Ajax
// setTimeout(() => {
// this.rData = genData();
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(this.rData),
// refreshing: false,
// isLoading: false,
// });
// }, 600);
};
onEndReached = async (event) => {
// load new data
// hasMore: from backend data, indicates whether it is the last page, here is false
if (this.state.isLoading && !this.state.hasMore) {
return;
} //如果this.state.hasMore为false，说明没数据了，直接返回
console.log('reach end', event);
this.setState({ isLoading: true });
this.rData = [...this.rData, ...((await this.genData()).sceneryinfo)]; //每次下拉之后将新数据装填过来
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
isLoading: false,
});
};
render() {
//这里就是个渲染数据，rowData就是每次过来的那一批数据，已经自动给你遍历好了，rouID可以作为key值使用，直接渲染数据即可
const row = (rowData, sectionID, rowID) => {
return (
<div key={rowID} style={{"height":"100px"}}>{rowData.name}</div>
);
};
return (
<div>
<ListView
key={this.state.useBodyScroll ? '0' : '1'}
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderFooter={ //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
() => (
<div style={{ padding: 30, textAlign: 'center' }}>
{this.state.isLoading ? 'Loading...' : 'Loaded'}
</div>
)
}
renderRow={row} //渲染你上边写好的那个row
useBodyScroll={this.state.useBodyScroll}
style={this.state.useBodyScroll ? {} : {
height: this.state.height,
border: '1px solid #ddd',
margin: '5px 0',
}}
pullToRefresh={<PullToRefresh
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>}
onEndReached={this.onEndReached}
pageSize={8} //每次下拉之后显示的数据条数
/>
</div>
);
}
}
export default ListContainer