创建项目
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适配