支持5中滚动类型

  • Table 基于Grid来实现，表格具有固定的头部，并且可以在垂直方向上滚动
  • Grid 构建任意网状的结构，传入一个二维的数组，渲染出类似棋盘的结构
  • List 列表，一个维的列表，横向滚动，X轴 & 竖向滚动，Y轴
  • Masonry 卡片效果
    • 可以在水平方向，也可以在垂直方向滚动
    • 不同于Grid的是可以自定义每个元素的大小，或者子元素的大小也可以是动态变化的
  • Collection 瀑布流
    • 类似于瀑布流的形式，同样可以水平和垂直方向滚动

https://github.com/bvaughn/react-virtualized
虚拟滚动demo https://codesandbox.io/examples/package/react-virtualized
https://css-tricks.com/rendering-lists-using-react-virtualized/
https://segmentfault.com/a/1190000017233625

  1. npm install react-virtualized
  • 缺点：不支持子元素的动态高度或者宽度，只支持固定的宽高

Table

Table案例 https://bvaughn.github.io/react-virtualized/#/components/Table
Table文档 https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
image.png

  1. import React from 'react';
  2. import { Column, Table } from 'react-virtualized';
  3. import 'react-virtualized/styles.css'; // only needs to be imported once
  5. // Table data as an array of objects
  6. const list = [
  7.   { name: 'Brian Vaughn', description: 'Software engineer' }
  8. ];
  10. function VirtualTable() {
  12.   return (
  13.     <Table
  14.       width={300}
  15.       height={300}
  16.       headerHeight={20}
  17.       rowHeight={30}
  18.       rowCount={list.length}
  19.       rowGetter={({ index }) => list[index]}
  20.     >
  21.       <Column
  22.         label='Name'
  23.         dataKey='name'
  24.         width={100}
  25.       />
  26.       <Column
  27.         width={200}
  28.         label='Description'
  29.         dataKey='description'
  30.       />
  31.     </Table>
  32.   );
  33. };
  35. export default VirtualTable

Grid

https://bvaughn.github.io/react-virtualized/#/components/Grid
image.png

MultiGrid

多列固定虚拟滚动

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import moment from 'moment';
  4. import { MultiGrid } from 'react-virtualized';
  6. import styles from "./style.less";
  8. const subChild = () => {
  9.   const arr = ['成绩', '科目'];
  10.   return arr.map(item => <div key={item} className='flex-1'>{item}</div>);
  11. };
  13. App.propTypes = {
  14.   data: PropTypes.array.isrequired,
  15. }
  17. function App({ data }) {
  19.   // 固定表头
  20.   function getThead(columnIndex) {
  21.     const { values } = data[0] || {};
  22.     if (columnIndex < 2) {
  23.       const arr = ['INFO', '机刷'];
  24.       return arr[columnIndex];
  25.     };
  27.     if (values) {
  28.       const thead = values.map((item, i) => {
  29.         const [time] = item;
  30.         return moment(time).format('HH:mm');
  31.       });
  32.       return (
  33.         <>
  34.           <div style={{ borderBottom: '1px solid #ddd' }}>{thead[columnIndex]}</div>
  35.           <div className="flex">{subChild()}</div>
  36.         </>
  37.       );
  38.     }
  39.   }
  41.   // 固定左侧的列
  42.   function getColumns(columnIndex, rowIndex) {
  43.     const { keys } = data[rowIndex - 1];
  44.     if (columnIndex > 1) return;
  45.     return keys[columnIndex];
  46.   }
  48.   // 表格的内容
  49.   function getTbody(columnIndex, rowIndex) {
  50.     const { values } = data[rowIndex - 1];
  51.     const columns = values[columnIndex - 2];
  53.     return columns.map((item, i) => {
  54.       if (i < 3) return null;
  55.       return <div className='flex-1'>{item ? item : '-'}</div>;
  56.     });
  57.   }
  60.   function cellRenderer({ columnIndex, key, rowIndex, style }) {
  61.     // 渲染表头
  62.     if (rowIndex === 0) {
  63.       return (
  64.         <div className={styles.Cell} key={key} style={{ ...style, height: 80 }}>
  65.           {getThead(columnIndex)}
  66.         </div>
  67.       );
  68.     }
  70.     // 固定左侧2列
  71.     if (columnIndex < 2) {
  72.       return (
  73.         <div className={styles.Cell} key={key} style={style}>
  74.           {getColumns(columnIndex, rowIndex)}, {rowIndex}
  75.         </div>
  76.       );
  77.     }
  79.     return (
  80.       <div className={styles.Cell} key={key} style={style}>
  81.         <div className="flex">{getTbody(columnIndex, rowIndex)}</div>
  82.       </div>
  83.     );
  84.   }
  86.   return (
  87.     <MultiGrid
  88.       cellRenderer={cellRenderer} // 渲染的表格内容
  89.       columnWidth={240} // 每列的宽度
  90.       columnCount={182} // 多少列，如果有固定列，需要加上固定列
  91.       fixedRowCount={1} // 固定的表头行
  92.       fixedColumnCount={2} // 左侧固定的的列
  93.       width={1200} // Table的宽度
  94.       height={254} // Table的高度 + 滚动条的高度 14px
  95.       styleTopLeftGrid={{ height: 80 }}
  96.       styleTopRightGrid={{ height: 80 }}
  97.       rowHeight={40} // 一行的高度
  98.       rowCount={5} // 多少行
  99.       hideTopRightGridScrollbar={true}
  100.     />
  101.   );
  102. }
  103. export default App;

List

https://bvaughn.github.io/react-virtualized/#/components/List
列表滚动demo https://codesandbox.io/s/sckvn
image.png

Collection

https://bvaughn.github.io/react-virtualized/#/components/Collection
image.png

antd-table-virtual

https://github.com/ctq123/ant-virtual-table
https://judes.me/frontend/2019/09/17/infinite-table.html
https://www.daimajiaoliu.com/daima/4723be904900405

  1. import React, { PureComponent, Fragment } from "react";
  2. import { VirtualTable } from "ant-virtual-table";
  3. import { Pagination } from "antd";
  4. import "antd/dist/antd.css";
  6. const columns = [
  7.   {
  8.     title: "序号",
  9.     dataIndex: "id",
  10.     // fixed: 'left',
  11.     width: 100
  12.   },
  13.   {
  14.     title: "姓名",
  15.     dataIndex: "name",
  16.     width: 150
  17.   },
  18.   {
  19.     title: "年龄",
  20.     dataIndex: "age",
  21.     width: 100,
  22.     sorter: (a, b) => a.age - b.age,
  23.   },
  24.   {
  25.     title: "性别",
  26.     dataIndex: "sex",
  27.     width: 100,
  28.     render: text => {
  29.       return text === "male" ? "男" : "女";
  30.     }
  31.   }
  32. ];
  34. function generateData(count) {
  35.   const res = [];
  36.   const names = ["Tom", "Marry", "Jack", "Lorry", "Tanken", "Salla"];
  37.   const sexs = ["male", "female"];
  38.   for (let i = 0; i < count; i++) {
  39.     let obj = {
  40.       id: i,
  41.       name: names[i % names.length] + i,
  42.       sex: sexs[i % sexs.length],
  43.       age: 15 + Math.round(10 * Math.random())
  44.     };
  45.     res.push(obj);
  46.   }
  47.   return res;
  48. }
  50. const dataSource = generateData(10000);
  52. class App extends PureComponent {
  53.   constructor(props) {
  54.     super(props);
  55.     this.state = {
  56.       pageNumber: 1,
  57.       objectsPerPage: 10,
  58.       list: dataSource
  59.     };
  60.   }
  62.   // 改变页面数字第几页发起的请求
  63.   onPageChange(pageNumber) {
  64.     this.setState({
  65.       pageNumber
  66.     });
  67.   }
  69.   // 改变页面显示条数发起的请求
  70.   onShowSizeChange(current, objectsPerPage) {
  71.     const list = dataSource.slice(
  72.       (current - 1) * objectsPerPage,
  73.       objectsPerPage
  74.     );
  75.     this.setState({
  76.       list,
  77.       pageNumber: current,
  78.       objectsPerPage
  79.     });
  80.   }
  82.   onChange = (selectedRowKeys, selectedRows) => {
  83.     console.log(
  84.       `onChange selectedRowKeys: ${selectedRowKeys}`,
  85.       "selectedRows: ",
  86.       selectedRows
  87.     );
  88.   };
  90.   onSelect = (record, selected, selectedRows, nativeEvent) => {
  91.     console.log(
  92.       `onSelect record: ${record} selected: ${selected}`,
  93.       "selectedRows: ",
  94.       selectedRows
  95.     );
  96.   };
  98.   onSelectAll = (selected, selectedRows) => {
  99.     console.log(
  100.       `onSelectAll selected: ${selected}`,
  101.       "selectedRows: ",
  102.       selectedRows
  103.     );
  104.   };
  106.   render() {
  107.     const { list = [] } = this.state;
  108.     const rowSelection = {
  109.       onChange: this.onChange,
  110.       onSelect: this.onSelect,
  111.       onSelectAll: this.onSelectAll
  112.     };
  114.     return (
  115.       <Fragment>
  116.         <div style={{ height: 30, width: "100%" }} />
  117.         <VirtualTable
  118.           columns={columns}
  119.           dataSource={list}
  120.           rowKey="id"
  121.           pagination={false}
  122.           scroll={{ x: 300, y: 400 }}
  123.           rowSelection={rowSelection}
  124.           bordered
  125.         />
  126.         <Pagination
  127.           size="small"
  128.           total={list.length}
  129.           current={this.state.pageNumber}
  130.           pageSize={this.state.objectsPerPage}
  131.           showSizeChanger
  132.           pageSizeOptions={["10", "20", "50", "1000"]}
  133.           onShowSizeChange={this.onShowSizeChange.bind(this)}
  134.           onChange={this.onPageChange.bind(this)}
  135.           showTotal={() => `共 ${list.length} 条`}
  136.         />
  137.       </Fragment>
  138.     );
  139.   }
  140. }
  142. export default App;