react antd上拉加载与下拉刷新与虚拟列表使用

创建项目

create-react-app antdReact

安装：antd-mobile、react-virtualized

npm i antd-mobile -S
npm i react-virtualized -S

在component 中创建一个scroll.jsx 文件，代码如下：

import './Scroll.less';
import { useEffect, useRef, useState } from 'react';
import { List, Image, InfiniteScroll, PullToRefresh } from 'antd-mobile'; // 使用antd 的上拉加载与下拉刷新组件

import { List as VirtualizedList, AutoSizer, WindowScroller } from 'react-virtualized';
const rem =
    Math.floor(
        ((document.documentElement.clientHeight > document.documentElement.clientWidth
            ? document.documentElement.clientWidth / 10
            : (document.documentElement.clientHeight / 10) * 0.7) *
            100) /
            37.5
    ) / 100; // 适配移动端，当前使用的 postcss-pxtorem 值为 37.5

const Scroll = (props) => {
    const [rowHeight, setRowHeight] = useState(props.itemHeight * rem); // 每行的高度
    const scrollElm = useRef(null); // 获取当前要滚动的元素
    const [element, setElement] = useState(); // 赋值 WindowScroller 要滚动的元素

    useEffect(() => {
        setElement(scrollElm.current);
    }, [scrollElm.current]); // 避免元素节点没有而滚动条有问题

    return (
        <div className="scroll-list" ref={scrollElm}> // 设置样式
            <WindowScroller scrollElement={element}>
                {({ height, scrollTop, isScrolling }) => {
                    return props.isPullUp ? (
                        <PullToRefresh onRefresh={props.onRefresh} headHeight={50} threshold={80}>
                            <List>
                                <AutoSizer disableHeight>
                                    {({ width }) => (
                                        <VirtualizedList
                                            autoHeight
                                            rowCount={props.dataLength}
                                            rowRenderer={props.Row}
                                            width={width}
                                            height={height}
                                            rowHeight={rowHeight}
                                            overscanRowCount={5}
                                            isScrolling={isScrolling}
                                            scrollTop={scrollTop}
                                        ></VirtualizedList>
                                    )}
                                </AutoSizer>
                            </List>
                        </PullToRefresh>
                    ) : (
                        <List>
                            <AutoSizer disableHeight>
                                {({ width }) => (
                                    <VirtualizedList
                                        autoHeight
                                        rowCount={props.dataLength}
                                        rowRenderer={props.Row}
                                        width={width}
                                        height={height}
                                        rowHeight={rowHeight}
                                        overscanRowCount={5}
                                        isScrolling={isScrolling}
                                        scrollTop={scrollTop}
                                    ></VirtualizedList>
                                )}
                            </AutoSizer>
                        </List>
                    );
                }}
            </WindowScroller>
            {props.isPullTo && (
                <InfiniteScroll loadMore={props.onLoadMore} hasMore={props.isLoading} />
            )}
        </div>
    );
};

Scroll.defaultProps = {
    isLoading: false,
    isPullUp: true,
    itemHeight: 60,
    onRefresh: undefined,
    isPullTo: false,
    onLoadMore: () => {},
};

export default Scroll;

defaultProps： 为当前组件的默认的 Props

　　isPullUp：是否开启下拉刷新

　　itemHeight：为每行的高度

　　isPullTo: 是否开启上拉加载

 

WindowScroller 组件的参数说明可以查看：https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md

AutoSizer 组件的参数说明可以查看：https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

VirtualizedList 组件的参数说明可以查看： https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md

 

在App 中使用后，效果如下

适配移动端操作可以查看：react配置postcss-pxtorem适配