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 });
	      }, 1000);
      }}
>
{
     _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方法后，加载后页面数据渲染没变化，这是因为要拼接一下数组数据，将之前的数据和新刷新的数据拼接在一起，再渲染，数据增加：

   getCarList = () => {
     
        var _self = this;  //更改this指向
        var params = {
     
            token: token,
            page_number: page_number,
            page_size:page_size
        }

        ajax.postJson(config.carlistUrl, params, function (res) {
     
            if (res.resultCode == 200) {
     
                caritemlist = res.data.list;
                var list = _self.state.caritemlist.concat(caritemlist);// 数据拼接

                _self.setState({
     
                    caritemlist: list
                }, Toast.hide())
            } else {
     
                Toast.fail(res.message, 3);
            }
        }, function () {
     

        }, function (err) {
     
            Toast.fail('网络连接失败,请检查网络设置', 3);
        })
    }

三、完整代码

import React from 'react';
import '../css/carList.scss'
import {
      Toast, Icon ,PullToRefresh} from 'antd-mobile';
import _util_ from '../../../common/businessUtils/util';
const locationUrl = _util_.getLocation_util() + '#';
const maindriverImg = require("../images/main-driver.png");
const subdriverImg = require("../images/sub-driver.png");
const rightCoin = require("../images/next.png");
var config = require("../config/config");
var ajax = require("../../../common/businessUtils/ajaxUtils").default;

var caritemlist,page_number=1,page_size="2"
var token = "5YNls6foU6G4jlJ9++PC2wVWab8=";

class CarList extends React.Component {
     
    constructor(props) {
     
        super(props);
        this.state = {
     
            caritemlist: [],
            refreshing:true,
        }
    }

    componentDidMount() {
     
        this.getCarList();
    }

    getCarList = () => {
     
        var _self = this;  //更改this指向
        var params = {
     
            token: token,
            page_number: page_number,
            page_size:page_size
        }

        ajax.postJson(config.carlistUrl, params, function (res) {
     
            if (res.resultCode == 200) {
     
                caritemlist = res.data.list;
                var list = _self.state.caritemlist.concat(caritemlist);

                _self.setState({
     
                    caritemlist: list
                }, Toast.hide())
            } else {
     
                Toast.fail(res.message, 3);
            }
        }, function () {
     

        }, function (err) {
     
            Toast.fail('网络连接失败,请检查网络设置', 3);
        })
    }

    render() {
     
        var _self = this;  //更改this指向
        return (
            <div className="carList">
                <div className="list">
                    <ul>
                        <PullToRefresh
                            damping={
     60}  //拉动距离配置
                            indicator={
      {
     activate:'加载更多...',finish: '加载完成'}}  //提示配置
                            direction='up' //拉动方向
                            refreshing={
     _self.state.refreshing}  //是否显示刷新状态
                            onRefresh={
     () => {
       //必选, 刷新回调函数
                                page_number++
                                _self.setState({
      
                                    refreshing: true 
                                },_self.getCarList());
                                setTimeout(() => {
     
                                    _self.setState({
      refreshing: false });
                                }, 1000);
                            }}
                        >
                            {
     _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>
                    </ul>
                </div>
            </div>
        )
    }
}


export default CarList;

若有小伙伴们有其他方法，欢迎指教，不胜感激~
(✿◕‿◕✿)