关于antd-mobile中列表下拉刷新PullToRefresh的使用

相信有很多小伙伴发现antd-mobile中的下拉刷新组件，也发现例子挺难的，其实这个组件并没有那么复杂，只是demo例子不好理解，给大家提供一个简单的demo，或许可以帮到你

上拉刷新下拉加载

- 因为它用react-dom做操作了，所以把react-dom也导进来
- rowID是每次的ID，rowData是每次的数据
- renderSseprator就是个分隔符
- this.state.dataSource就是数据源 
- 外围的那个const的dataSource是一种数据结构，它有一个方法叫cloneWithRows
- Button没用，删就完了
- renderFooter是为了做上拉刷新时的Loading效果
- 第一步是通过dataSource去拿数据，第二步是通过render(row)去渲染那个模板
- rowData是每一页的数据，就是每次装载进来的数据，rowID是它帮你封装好的，直接在key={rowID}用就行，
在DidMount整完数据以后在这边的rouData就是你的state.dataSource里面的数据(第一页)
- renderSeparator 就是刚开始他们行和行之间的分隔符
- pageSize是刷新的时候一次显示几条数据

附上代码，可直接复制过去，根据你的需求更改

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'    //下拉刷新组件依赖react-dom，所以需要将其引进来

import { PullToRefresh, ListView } from 'antd-mobile';

class ListContainer extends Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({  //这个dataSource有cloneWithRows方法
      rowHasChanged: (row1, row2) => row1 !== row2,
    });   
    
    this.pageNo = 0 //定义分页信息
    this.state = {
      dataSource,
      refreshing: true,
      isLoading: true,
      height: document.documentElement.clientHeight,
      useBodyScroll: false,
      hasMore: true
    };
  }

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

  async componentDidMount() {
    const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;

    this.rData = (await this.genData()).sceneryinfo;
    console.log(this.rData)
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rData),
      height: hei,
      refreshing: false,
      isLoading: false,
    });
  }
  genData(){  //请求数据的方法
    this.pageNo++     //每次下拉的时候pageNo++                                                                                 
    return fetch('/scenery/json/scenerynearycitylist.html?CountryId=0&ProvinceId=3&CityId=53&LbTypes=&sorttype=0&page='+this.pageNo+'&gradeid=0&themeid=0&pricerange=0&issearchbytimenow=0&paytype=0&range=0&keyword=0&IsGlobal=0&IsYiYuan=0&cityArea=0&lat=0&lon=0', 
            {
              method: 'GET',
              headers: {
                  'content-type': 'application/json'
              },
            })
            .then(response => response.json())
            .then(function(result) {
                if(result){
                  return result
                }else{
                  this.setState({
                    hasMore: false
                  })
                }
            })
  }

  onRefresh = () => {
    // this.setState({ refreshing: true, isLoading: true });
    // // simulate initial Ajax
    // setTimeout(() => {
    //   this.rData = genData();
    //   this.setState({
    //     dataSource: this.state.dataSource.cloneWithRows(this.rData),
    //     refreshing: false,
    //     isLoading: false,
    //   });
    // }, 600);
  };

  onEndReached = async (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }   //如果this.state.hasMore为false，说明没数据了，直接返回
    console.log('reach end', event);
    this.setState({ isLoading: true });
    this.rData = [...this.rData, ...((await this.genData()).sceneryinfo)];  //每次下拉之后将新数据装填过来
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.rData),
      isLoading: false,
    });
  };

  render() {
    //这里就是个渲染数据，rowData就是每次过来的那一批数据，已经自动给你遍历好了，rouID可以作为key值使用，直接渲染数据即可
    const row = (rowData, sectionID, rowID) => {
      return (
        <div key={rowID} style={{"height":"100px"}}>{rowData.name}</div>
      );
    };
    return (
      <div>
        <ListView
          key={this.state.useBodyScroll ? '0' : '1'}
          ref={el => this.lv = el}
          dataSource={this.state.dataSource}
          renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
            () => (
                  <div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                  </div>
                )
          }
          renderRow={row}   //渲染你上边写好的那个row
          useBodyScroll={this.state.useBodyScroll}
          style={this.state.useBodyScroll ? {} : {
            height: this.state.height,
            border: '1px solid #ddd',
            margin: '5px 0',
          }}
          pullToRefresh={<PullToRefresh
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
          />}
          onEndReached={this.onEndReached}
          pageSize={8}    //每次下拉之后显示的数据条数
        />
      </div>
    );
  }
}

export default ListContainer

---

如果说你看到了这里，是不是觉得还是有点东西的，如果你觉得帮到你了，给个评论鼓励鼓励孩子吧，发了这么多到现在就一条评论，挺可怜的。后续给大家发一个在下拉刷新组件中如何使用redux，感谢查阅~.~