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 = https://www.cnblogs.com/alisadream/p/(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 =https://www.cnblogs.com/alisadream/p/> this.getRowData(rowData)}
          pageSize={PAGE_SIZE}
          renderBodyComponent={() => }
          pullToRefresh={}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={50}
          useBodyScroll={useBodyScroll}
          renderFooter={
            () => (
              

                {!isLoading &&'已經沒有更多資料了'}
              </div>
            )
          }
        />
      </div>
    );
  }
}

export default ReplaceObuOrder;

標籤：HTML5

上一篇：前端學習（2685）：重讀vue電商網站6之如何重置表單

下一篇：uni-app開發經驗分享十三：實作手機掃描二維碼并跳轉全程序