antd PullToRefresh, ListView下拉刷新运用

/* eslint-disable no-undef */
/* eslint-disable no-return-assign */
/* eslint-disable react/no-find-dom-node */
import React, { Component } from 'react'
import ReactDOM from 'react-dom' // 下拉刷新组件依赖react-dom，所以需要将其引进来
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import { createForm } from 'rc-form'
import { PullToRefresh, ListView } from 'antd-mobile'
import { getCaseManagementList } from '../../../data/ajax'

class ListContainer extends Component {
  constructor(props) {
    super(props)
    const dataSource = new ListView.DataSource({
      // 这个dataSource有cloneWithRows方法
      rowHasChanged: (row1, row2) => row1 !== row2
    })
    this.state = {
      pageSize: 8,
      pageNo: 0,
      dataSource,
      refreshing: true,
      isLoading: true,
      height: document.documentElement.clientHeight,
      useBodyScroll: false,
      hasMore: true,
      dataAllList: []
    }
  }

  componentDidMount() {
    const { height } = this.state
    const hei = height - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop
    // 请求数据
    this.genData()
    this.setState({
      height: hei
    })
  }

  componentDidUpdate() {
    const { useBodyScroll } = this.state
    if (useBodyScroll) {
      document.body.style.overflow = 'auto'
    } else {
      document.body.style.overflow = 'hidden'
    }
  }

  // 列表
  getListData = pageNo => {
    const { pageSize, dataSource, dataAllList } = this.state
   
        console.log(pageNo)
        getCaseManagementList({
          pageNo,
          pageSize
        }).then(suc => {
          const { data } = suc
          if (data.resultId === '1') {
            const { data: dataObj } = data
            const { page: dataPages } = dataObj
            const { list: dataLists } = dataPages
            // 数据拼接起来
            const allList = [...dataAllList, ...dataLists]
            // 如果数据条数大于或者等于总条数时
            if (allList.length >= dataPages.count) {
              this.setState({
                hasMore: false,
                isLoading: false
              })
            } else {
              this.setState({
                dataSource: dataSource.cloneWithRows(allList),
                dataAllList: [...allList],
                refreshing: false,
                isLoading: false,
                pageNo
              })
            }
          }
        })
      
  }

  genData = () => {
    const { pageNo } = this.state
    this.getListData(pageNo + 1)
  }

  onRefresh = () => {
    this.setState({ refreshing: true, isLoading: true })
    setTimeout(() => {
      this.genData()
    }, 600)
  }

  onEndReached = event => {
    const { hasMore } = this.state
    if (!hasMore) {
      return
    }
    console.log('reach end', event)
    this.setState({ isLoading: true })
    this.genData()
  }

  render() {
    const {
      useBodyScroll,
      dataSource,
      isLoading,
      height,
      refreshing
    } = this.state
    // 这里就是个渲染数据，rowData就是每次过来的那一批数据，已经自动给你遍历好了，rouID可以作为key值使用，直接渲染数据即可
    const row = (rowData, i) => {
      return (
        

          {`${rowData.id}第几次${i}`}
        
      )
    }
    return (
      

         (this.lv = el)}
          dataSource={dataSource}
          renderFooter={
            // renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
            () => (
              

                {isLoading ? '加载中...' : '已到底'}
              
            )
          }
          renderRow={row} // 渲染你上边写好的那个row
          useBodyScroll={useBodyScroll}
          style={
            useBodyScroll
              ? {}
              : {
                  height
                }
          }
          pullToRefresh={
            
          }
          onEndReached={this.onEndReached}
          // pageSize={10} // 每次下拉之后显示的数据条数
        />
      
    )
  }
}
ListContainer.defaultProps = {
  match: {},
  history: {},
  tokenInfo: {}
}

ListContainer.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string
    })
  }),
  history: PropTypes.shape({
    length: PropTypes.number
  }),
  tokenInfo: PropTypes.shape({
    data: PropTypes.shape({
      busUserType: PropTypes.string
    })
  })
}
export default withRouter(createForm()(ListContainer))

以上代码是实现的步骤，具体属性介绍可以去官网上了解antd（长列表页）https://mobile.ant.design/components/list-view-cn/