ListView上拉加载下拉刷新

import { utils } from 'goblin'; import { ListView, Button, PullToRefresh } from 'antd-mobile'; import { NoDataPanel } from 'components'; import { connect } from 'dva'; import { encryptionEtcObuNumber, isNotEmptyStr } from 'utils/tool'; import { PAGE_SIZE } from 'configs/constants'; import { namespace } from '../model';  /**  * 自定义body的包裹组件  * 问题：为啥将render里面无数据逻辑移入此方法  * 原因：解决下拉刷新时，刷新提示一直显示的issue  */ function ListContainer(props) {   const dataList = props.dataList || [];    return (     <div className="am-list-body my-body">       {         dataList.length > 0 ? props.children : <NoDataPanel>           <p>             暂时没有任何数据           </p>         </NoDataPanel>       }     </div>   ); }  @connect(state => state[namespace], dispatch => ({   replaceObuOrder(data) {     return dispatch({ type: `${namespace}/replaceObuOrder`, payload: { ...data, pageSize: PAGE_SIZE } });   },   fetchUpdateState(data) {     return dispatch({ type: `${namespace}/fetchUpdateState`, payload: data });   }, }))  class ReplaceObuOrder extends React.Component {   constructor(props) {     super(props);     const dataSource = new ListView.DataSource({       rowHasChanged: (row1, row2) => row1 !== row2,     });      this.state = {       dataList: [],       dataSource,       useBodyScroll: true, // 使用html的body作为滚动容器       refreshing: true, // 是否显示刷新状态       isLoading: true, // 是否在加载中       hasMore: true, // 是否最后一页数据       preId: '', // 上一页最后一条记录Id     };   }    componentDidMount() {     utils.setTitle('订单列表');      // 修复当前页面有滚动条，从下页面回退到当前页面，ios出现白屏     if ('scrollRestoration' in window.history) {       window.history.scrollRestoration = 'manual'; // 改为manual之后，就不会记录滚动位置     }      const { replaceObuOrder } = this.props;     replaceObuOrder();   }    /**    * 描述：数据有变化时；或者数据未变化，但是state的dataList为空时，更新state    * 问题：(this.state.dataList.length < 1)为了防止多个页面共用一个model，       从其他页面进入多次进入该页面，由于数据未变化，出现数据不展示的情况    */   componentWillReceiveProps({ obuOrder }) {     const { dataSource } = this.state;      if ((JSON.stringify(obuOrder) !== JSON.stringify(this.props.obuOrder))     || (this.state.dataList.length < 1)) {       const num = obuOrder.length;       const newList = [...this.state.dataList, ...obuOrder];        // eslint-disable-next-line       this.setState({         dataList: newList,         preId: (num > 0) ? obuOrder[num - 1].id : '',         dataSource: dataSource.cloneWithRows(newList),         hasMore: obuOrder.length === PAGE_SIZE,         isLoading: false,       });     }   }    /**    * 下拉刷新   */   onRefresh = async () => {     const { isLoading } = this.state;     const { replaceObuOrder, fetchUpdateState } = this.props;      // 避免下拉时重复发送相同请求     if (isLoading) {       return;     }     // 重置state     this.setState({       refreshing: true,       isLoading: true,       dataList: [],       preId: '',       hasMore: true,     });     await fetchUpdateState({       obuOrder: [],     });     await replaceObuOrder();     this.setState({ refreshing: false, isLoading: false });   }    /**    * 上拉加载   */   onEndReached = async () => {     const { hasMore, preId, isLoading } = this.state;     const { replaceObuOrder } = this.props;      if (!hasMore || isLoading) {       // hasMore避免最后一页时，重复请求数据       // 避免上拉时重复发送相同请求       return;     }      this.setState({ isLoading: true });     await replaceObuOrder({ preId });     this.setState({ isLoading: false });   }    getRowData = (data) => {     // Number强制进行类型转换，避免后端返回类型不一致     const gray = (Number(data.statusOrder) === 4) ? 'gray' : '';      return (<div className="replaceObuOrder-item">       <div className="title">         <font>{data.typeDes}</font>         <span><font className={gray}>{data.statusOrderDesc}</font>{data.subStatusDesc}</span>       </div>       <div className="detail">         <div>{data.vanNumber}</div>         <p>{data.cardName}：{isNotEmptyStr(data.cardNo) && encryptionEtcObuNumber(data.cardNo)}</p>         {isNotEmptyStr(data.deviceId) && <p>电子标签号：{encryptionEtcObuNumber(data.deviceId)}</p>}         {isNotEmptyStr(data.description) && <p>{data.description}</p>}         {isNotEmptyStr(data.subDescription) && <p>{data.subDescription}</p>}       </div>       <div className="my-btn">         {data.buttons && data.buttons.map(item => (<Button           className="button"           onClick={this.handleButton(data, item.id)}         >           {item.name}         </Button>))}       </div>     </div>);   }    handleButton = (data, id) => async () => {     const { fetchUpdateState, history } = this.props;      await fetchUpdateState({       selectedObuOrderItem: data,     });     if (Number(id) === 1) {       history.push('detail?normalProcess=false');     } else if (Number(id) === 4) {       history.push('pay?normalProcess=false');     } else if (Number(id) === 13) {       history.push('receiveInfo?normalProcess=false');     }   }    render() {     const { dataSource, useBodyScroll, refreshing, dataList, isLoading } = this.state;      return (       <div className="replaceObuOrder">         <ListView           dataSource={dataSource}           renderRow={rowData => this.getRowData(rowData)}           pageSize={PAGE_SIZE}           renderBodyComponent={() => <ListContainer dataList={dataList} />}           pullToRefresh={<PullToRefresh             distanceToRefresh={60}             refreshing={refreshing}             onRefresh={this.onRefresh}           />}           onEndReached={this.onEndReached}           onEndReachedThreshold={50}           useBodyScroll={useBodyScroll}           renderFooter={             () => (               <div>                 {!isLoading && '已经没有更多数据了'}               </div>             )           }         />       </div>     );   } }  export default ReplaceObuOrder;