antd-mobile ListView组件使用方法

主体代码（含上拉加载和下拉刷新）

constructor(props) {
    super(props)
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: ds,
      list: [],
      upLoading : false,
      pullLoading : false
    }
  }
//上拉加载
  onEndReached = (page, lastPage) => {
    //当前页小于总页数继续请求下一页数据，否则停止请求数据
    if (Number(page) < Number(lastPage)) {
      this.setState({ upLoading: true })
      //接口请求下一页数据,完成后将upLoading设为false
      ...
    }
  }
//下拉刷新
onRefresh = () => {
    this.setState({ pullLoading: true })
     //接口请求第一页数据,完成后将pullLoading设为false
     ...
  }
//获取item进行展示
renderRow = (item, i) => {
    return (
       <div>
        //每个item
       </div>
      )
  }
render() {
   const { list, dataSource, upLoading, pullLoading } = this.state;
   return (
     <div className={styles.goodsDetail}>
        {
          list && list.rows && list.rows.length ?
            <ListView
              dataSource={dataSource.cloneWithRows(list.rows)}
              renderRow={(rowData, id1, i) => this.renderRow(rowData, i)}
              initialListSize={10}
              pageSize={10}
              renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
              { (list.pageNum < list.totalPage) && upLoading ?<Icon type="loading" />: null}
            </div>)}
              onEndReached={() => this.onEndReached(list.pageNum, list.totalPage)}
              onEndReachedThreshold={20}
              useBodyScroll={true}
              style={{ width: '100vw' }}
               pullToRefresh={<PullToRefresh // import { PullToRefresh } from 'antd-mobile'
                  refreshing={pullLoading}
                  onRefresh={this.onRefresh}
                />}
            />
            :
            list && list.rows && !list.rows.length ?
              <div className={styles.goodEntry}>
                <p>暂无数据</p>
              </div> : null
        }
      </div>
   )
}

list数据格式

其中pageNum为当前页，pageSize为每次请求数据条数，totalPage为数据的总页数

1551261307(1).jpg