mobile.ant.design组件库中PullToRefresh使用

PullToRefresh组件简介

1. PullToRefresh ：上/下拉刷新组件，支持ListView、GridView、WebView、ScrollView…等等需要刷新的view类型
   详情：mobile.ant.design
2. 使用案例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import  './index.less'
import { getBalanceDetail } from "@/services";
import { PullToRefresh, ListView } from 'antd-mobile';

class AccountBalance extends Component {
  constructor(props) {
    const dataSource = new ListView.DataSource({  //dataSource是一种数据结构  这个dataSource有cloneWithRows方法
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    super(props);
    this.state = {
      balanceList: [],
      pagination: {
        current: 1,
        pageSize: 30
      },
      dataSource,
      refreshing: true,
      isLoading: true,
      height: document.documentElement.clientHeight,
      useBodyScroll: false,
      hasMore: true
    }
  }
  componentDidMount() {
    const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
    this.setState({
      height: hei,
    });
    this.getBalanceDetailFun();
  }

  getBalanceDetailFun() {
    let balanceList = this.state.balanceList;
    getBalanceDetail(this.state.pagination).then(({ data, pagination }) => {
      let { hasMore, ...paginations } = pagination
      data.balanceHistoryVOS.forEach((item) => {
        balanceList.push(item)
      })
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(balanceList), //拿到DataSource数据
        pagination: paginations,
        balanceList,
        withdrawableAmount: data.withdrawableAmount,
        award: data.award,
        refreshing: false,
        isLoading: false,
      })
    }).catch((err) => {
      console.log(err);
    })
  }

  onEndReached = () => {
    const { pagination, isLoading } = this.state || {};
    if (!isLoading) {
      pagination.current = pagination.current + 1
      this.setState({
        isLoading: true,
        pagination,
      }, () => {
        this.getBalanceDetailFun();
      })
    }
  }

  render() {
    const row = (rowData, sectionID, rowID) => {
      return (
        <div className="balance-minxi-list" key={rowData}>
          <div className="list-title-wrapper">
            <div className="list-title">{rowData.description}</div>
            <div className="list-time">{rowData.createTime}</div>
            <div></div>
          </div>
          <div className={styles[(rowData.changeType === 1 ? 'list-active' : 'list-price')]}>{(rowData.changeType === 1 ? '+' : '-') + rowData.tradeAmount}</div>
        </div>
      );
    };
    return (
      <>
        <div className= "balance">
          <div className= "balance-minxi">
            <div className= 'balance-minxi-scroll'>
              <ListView
                key={this.state.useBodyScroll ? '0' : '1'}
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderRow={row}
                useBodyScroll={this.state.useBodyScroll}
                style={this.state.useBodyScroll ? {} : {
                  height: this.state.height,
                }}
                renderFooter={    //renderFooter就是上下拉时候的loading效果，这里的内容可以自己随需求更改
                  () => (
                    <div style={{ padding: 10, textAlign: 'center' }}>
                      {this.state.isLoading ? 'Loading...' : '暂无更多数据'}
                    </div>
                  )
                }
                pullToRefresh={<PullToRefresh
                  direction={'up'} 	//	拉动方向
                  distanceToRefresh={1000} // 刷新距离
                  damping={100} // 拉动距离限制 这个自己随意调  按照自己的需求
                  refreshing={this.state.refreshing} // refreshing是否显示刷新状态
                />}
                onEndReached={() => { this.onEndReached() }}
                pageSize={30} // 刷新的时候显示多少行数据
              />
            </div>
          </div>
        </div>
      </>
    )
  }

}
export default AccountBalance

上面就是PullToRefresh使用案例，可能写的很简单。但是我感觉初步使用按照这个来还是没问题的。博主也是一个半年工作经验的小白，我们对于这部分慢慢更，如果小伙伴也有类似的下拉刷新组件可以分享出来，大家一起快乐开发。最近在探究antd的源码。我感觉知道原理改造起来很简单，还是要多学多练多实战。⛽️⛽️⛽️⛽️⛽️