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的源碼。我感覺知道原理改造起來很簡單，還是要多學多練多實戰。⛽️⛽️⛽️⛽️⛽️