React使用PullToRefresh完成数据加载

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 })<