标签：const 下拉 react useState 上拉 pageNum false true any

封装了一个react下拉刷新上拉加载组件

JsLin_关注 0.2162019.07.31 13:57:24字数 8阅读 2,403

useState,useEffect,React.memo,Ts 使用等

import React, { useState, useEffect} from 'react'
import { ListView, Icon } from 'antd-mobile';
import PullToRefresh from 'rmc-pull-to-refresh';  //antd rmc-pull-to-refresh  

import style from './index.module.scss'
import Result from '@components/result/result';

/**
 * @description: 下拉刷新传参
 * @param {IProps}: IProps
 */
interface IProps {
  requestFun: Function;
  requestParams?: Object;
  renderRow: Function;
  renderHead?: Function;
  scroHeight?: number;
}

let initData: any[];
const pageSize: number = 10; //初始化默认页
let pageNum: number = 1;     //第几页

export default React.memo(({ requestFun, requestParams, renderRow, renderHead, scroHeight }: IProps) => {

  const dataSourceInit = new ListView.DataSource({
    rowHasChanged: (row1: any, row2: any) => row1 !== row2,
  });

  const [dataSource, setDataSource] = useState(dataSourceInit);
  const [refreshing, setRefreshing] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [hasMore, setHasMore] = useState(true);
  const [heightInit] = typeof scroHeight === 'number' ? useState(scroHeight) : useState(document.documentElement.clientHeight);
  const [useBodyScroll] = useState(false);
  const [isNoResult, setIsNoResult] = useState(false);

  useEffect(() => {
    fetchData()
    if (useBodyScroll) {
      document.body.style.overflow = 'auto';
    } else {
      document.body.style.overflow = 'hidden';
    }
  }, [requestParams])

  const fetchData = async (num?: number) => {
    const pageNumVal = typeof num === 'number' ? pageNum : 1;
    const paramsVal = Object.assign(
      {
        pageSize,
        // tslint:disable-next-line:trailing-comma
        pageNum: pageNumVal
      },
       // tslint:disable-next-line:trailing-comma
      requestParams
    )
    const resultResponser = await requestFun(paramsVal);
    const { code, list, hasNext } = resultResponser;
    if (code === 200) {
      pageNum = pageNumVal;
      initData = pageNum === 1 ? list : initData.concat(list);
      if (pageNum === 1 && (!!!list || list.length === 0)) {
        setIsNoResult(true)
      }
    }
    setRefreshing(false)
    if (hasNext === 0) {
      setHasMore(false)
      setIsLoading(false)
    }
    setDataSource(dataSource.cloneWithRows(initData));
  }

  const onRefresh = () => {
    setRefreshing(true)
    setIsLoading(true)
    fetchData()

  };

  const onEndReached = (event: any) => {
    if (!isLoading && !hasMore) {
      return false;
    }
    setIsLoading(true)
    fetchData(++pageNum)
    setIsLoading(false)
  };

  const separator = (sectionID: any, rowID: any) => (
    <div
      key={`${sectionID}-${rowID}`}
      style={{
        backgroundColor: '#F5F5F9',
        height: 15,
      }}
    />
  );

  const row = (rowData: any, sectionID: any, rowID: any) => renderRow(rowData, sectionID, rowID);

  const renderHeader = () => {
    if (typeof renderHead === 'function') {
      return renderHead()
    } else {
      return null
    }
  }

  return (
    <>
      {
        !isNoResult ?
          <ListView
            className={style.ownHeader}
            key={useBodyScroll ? '0' : '1'}
            dataSource={dataSource}
            renderHeader={renderHeader}
            renderFooter={() => (<div style={{ padding: 30, textAlign: 'center', border: 'none' }}>
              {isLoading ? '加载中..' : '数据已加载全部'}
            </div>)}
            renderRow={row}
            renderSeparator={separator}
            useBodyScroll={useBodyScroll}
            style={useBodyScroll ? {} : {
              height: heightInit,
              // border: '1px solid #ddd',
              margin: '30px 0',
            }}
            pullToRefresh={
              <PullToRefresh
                indicator={{
                  deactivate: <div></div>,
                  activate: <div className={style.freshFont}>松开立即刷新</div>,
                  release: <div className={style.activeStyle}>
                    <Icon type="loading" color="#fed224" />
                  </div>,
                  finish: <div className={style.freshFont}></div>
                }}
                refreshing={refreshing}
                onRefresh={onRefresh}
              ></PullToRefresh>}
            onEndReached={onEndReached}
            onEndReachedThreshold={10}
          />
          :
           <Result />
      }

    </>
  );

});

 

标签：const,下拉,react,useState,上拉,pageNum,false,true,any
来源： https://www.cnblogs.com/sexintercourse/p/15916029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。