React使用PullToRefresh完成数据加载
一、先将从接口获取的数据渲染出来
{
_self.state.caritemlist.map((item, index) => {
return (
<li key={
item.carId}>
<p className="carNo">{
item.carCode}</p>
<div className="man">
<img src={
maindriverImg} alt="" /><span>{
item.mastDriver}</span><img src={
subdriverImg} alt="" /><span>{
item.slaveDriver}</span>
</div>
<div className="rightCoin"><img src={
rightCoin} alt="" /></div>
</li>
)
})}
二、加入PullToRefresh方法
<PullToRefresh
damping={
60} //拉动距离配置
indicator={
{
activate:'加载更多...',finish: '加载完成'}} //提示配置
direction='up' //拉动方向
refreshing={
_self.state.refreshing} //是否显示刷新状态
onRefresh={
() => {
//必选, 刷新回调函数
page_number++ //页码数+1
_self.setState({
refreshing: true
},_self.getCarList()); //setState成功后请求getCarList(获取列表数据)方法
setTimeout(() => {
_self.setState({
refreshing: false }