# MList 列表

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/list/freepass)
- 平台：移动端
- 维护者：王斌
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MList]

## 代码演示

### 自定义渲染

自定义渲染（list 默认不会渲染内容，内容需要自定义或设置模版进行渲染）

```jsx
import React from 'react';
import { MList, MListData } from '@weapp/ui';
import { datas } from '../mock';
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"

const style = { height: '300px' }

const data4 = [
  {
    id: '1',
    icon: imgSrc,
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    id: '2',
    icon: "Icon-mailbox",
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    id: '3',
    icon: imgSrc,
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
]

export default class ListDemo extends React.Component {
  state = {
    selected: []
  }

  onRowSelect = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected: arr })
  }

  customRenderItem1 = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <div key={rowID} style={{ padding: '0 15px' }}>
        <div
          style={{
            lineHeight: '50px',
            color: '#888',
            fontSize: 18,
            borderBottom: '1px solid #F6F6F6',
          }}
        >{obj.title}</div>
        <div style={{ display: 'flex', padding: '15px 0' }}>
          <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />
          <div style={{ lineHeight: 1 }}>
            <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div>
            <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>{rowID}</span>¥</div>
          </div>
        </div>
      </div>
    );
  }
  customRenderItem2 = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <span key={rowID}>
        {obj.title}
      </span>
    );
  }
  render() {
    return (
      <div>
        <h4>自定义渲染</h4>
        <MList
          sortable={true}
          direction="column"
          data={datas}
          style={style}
          customRenderContent={this.customRenderItem1}
        />
        <h4>带图标列表</h4>
        <MList
          selectedRowKeys={this.state.selected}
          showImg
          style={style}
          data={data4}
          customRenderContent={this.customRenderItem2}
          onRowSelect={this.onRowSelect}
        />
      </div>
    );
  }
}
```

### 拖拽

拖拽 超出换行/超出滚动/指定拖拽手柄

```jsx
import React from 'react';
import {
  MList,
  Icon,
  MListData,
  ListData
} from '@weapp/ui';
import { datas } from '../mock';
// import '../style/index.m.less'

const iconSortableData: ListData[] = Array.from(new Array(20).keys()).map((i, index) => {
  return {
    id: String(index),
    icon: <Icon name="Icon-move" className="my-handle" />,
    title: `Meet hotel${index}`,
  }
})

const style1 = { width: '100%', height: '200px' }
const style2 = { width: '100%' }
const style3 = { height: '300px' }
export default class ListDemo extends React.Component {
  state = {
  }

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <div key={rowID} style={{ padding: '0 15px', margin: '5px', border: '1px solid #ddd' }} >
        <div
          style={{
            lineHeight: '50px',
            color: '#888',
            fontSize: 18,
            borderBottom: '1px solid #F6F6F6',
          }}
        >{obj.title}</div>
        <div style={{ display: 'flex', padding: '15px 0' }}>
          <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />
          <div style={{ lineHeight: 1 }}>
            <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div>
            <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>{rowID}</span>¥</div>
          </div>
        </div>
      </div>
    );
  }

  customRenderItem2 = (item: MListData) => <div style={{ height: '40px', lineHeight: '40px' }}>
    {/*<Icon name="Icon-move" className="my-handle" />*/}
    <span>{item.title}</span>
  </div>

  render() {
    console.log('iconSortableData', iconSortableData)
    return (
      <div>
        <h4>横向拖拽 超出换行</h4>
        <MList sortable={true} direction="row"
          style={style1}
          data={datas}
          customRenderContent={this.customRenderItem}
        />
        <h4>横向拖拽 超出滚动</h4>
        <MList sortable={true} direction="row" horizontalScroll
          style={style2}
          data={datas}
          customRenderContent={this.customRenderItem}
        />
        <h4>指定拖拽手柄(长按左边图标进行拖拽)</h4>
        <MList
          sortable={true}
          style={style3}
          direction="column"
          sortableOptions={{ handle: '.my-handle', delay: '300' }}
          data={iconSortableData}
          customRenderContent={this.customRenderItem2}
          className={'demo-list-sortable'}
          showImg
        />
      </div>
    );
  }
}
```

### 选中

单选/多选，通过 multipleCheck 控制单选或多选

```jsx
import React from 'react';
import { MList, MListData } from '@weapp/ui';
import { datas } from '../mock';

const listStyle = { height: '250px' }
const style = { height: '300px' }
export default class ListDemo extends React.Component {

  state = {
    selected1: [],
    selected2: []
  }

  onRowClick = () => {
    console.log('点击')
  }
  onRowSelect = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected1: arr })
  }

  onRowSelect2 = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected2: arr })
  }

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <span key={rowID}>
        {obj.title}
      </span>
    );
  }

  render() {

    const swipeProps = {
      right: [
        {
          text: 'Cancel',
          onPress: (...arg: any) => console.log('cancel', arg),
          style: { backgroundColor: '#ddd', color: 'white' },
        },
        {
          text: 'Delete',
          onPress: () => console.log('delete'),
          style: { backgroundColor: '#F4333C', color: 'white' },
        },
      ],
      left: [
        {
          text: 'Reply',
          onPress: () => console.log('reply'),
          style: { backgroundColor: '#108ee9', color: 'white' },
        },
        {
          text: 'Cancel',
          onPress: () => console.log('cancel'),
          style: { backgroundColor: '#ddd', color: 'white' },
        },
      ],
      onOpen: () => console.log('global open'),
      onClose: () => console.log('global close')
    }
    return (
      <div>
        <h4>单选列表</h4>
        <MList
          showCheck
          selectedRowKeys={this.state.selected1}
          style={style}
          data={datas}
          customRenderContent={this.customRenderItem}
          onRowSelect={this.onRowSelect}
          onRowClick={this.onRowClick}
          withSwipeAction
          swipeActionProps={swipeProps}
        />
        <h4>多选列表</h4>
        <MList
          showCheck
          multipleCheck
          style={style}
          data={datas}
          listStyle={listStyle}
          rowSelect
          customRenderContent={this.customRenderItem}
          selectedRowKeys={this.state.selected2}
          onRowSelect={this.onRowSelect2}
        />
      </div>
    );
  }
}
```

### 滚动分页+下拉刷新

滚动分页+下拉刷新

```jsx
import React from 'react';
import { MList, MListData, PullToRefresh } from '@weapp/ui';
import { datas } from '../mock';
// import '../style/index.m.less'

const style = { height: '300px' }
export default class ListDemo extends React.Component {

  state = {
    data: datas,
    refreshing: false,
  }

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <span key={rowID} style={{marginLeft:'20px'}}>
        {obj.title}
      </span>
    );
  }
  onEndReached = () => {
    console.log('滚动到底部')
    this.setState({ data: [...this.state.data, ...datas] })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 1000);
  }

  render() {
    return (
      <div>
        <h4>滚动分页+下拉刷新</h4>
        <MList
          data={this.state.data}
          customRenderContent={this.customRenderItem}
          onEndReached={this.onEndReached}
          // onScroll={this.onScroll}
          style={style}
          pullToRefresh={
            <PullToRefresh
              direction="down"
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
            />
          }
          className={'demo-list'}
        />
      </div>
    );
  }
}
```

### 分组索引

分组索引

```jsx
import React from 'react';
import { MList, MListData, MListGroupData } from '@weapp/ui';
import { datas, dataGroupTitle } from '../mock';
// import '../style/index.m.less'

const style = { height: '300px' }
const checkStyle = { right: '30px', top: "0px" }
const quickSearchBarTop = { id: '#', content: '#' }

export default class ListDemo extends React.Component {

  state = {
    data: datas,
    dataGroupTitle: dataGroupTitle,
    selected: [],
  }

  onRowSelect = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected: arr })
  }

  onRowClick = (data?: MListData, index?: number) => {
    console.log(data, index)
  }

  renderHeader = (sectionData?: MListGroupData) => <div
    key={sectionData?.id}
    style={{ width: '100%', height: '100%', lineHeight: '35px' }}
  >我是分组标题:{sectionData?.content}</div>

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <div key={rowID} style={{ padding: '0 15px' }}>
        <div
          style={{
            color: '#888',
            fontSize: 18,
          }}
        >{obj.title}</div>
      </div>
    );
  }

  onQuickSearch = (obj: MListGroupData, i: number) => {
    this.setState({
      data1: datas,
      dataGroupTitle: [dataGroupTitle[i]],
    })
  }

  onQuickSearchTop = () => {
    this.setState({
      data1: datas,
      dataGroupTitle: dataGroupTitle,
    })
  }
  render() {
    return (
      <div>
        <h4>分组索引</h4>
        <MList.IndexedList
          data={this.state.data}
          style={style}
          showCheck
          checkboxPosition='right'
          showDataGroupByType
          multipleCheck
          checkStyle={checkStyle}
          dataGroupTitle={this.state.dataGroupTitle}
          indexedIdentities={dataGroupTitle}
          quickSearchBarTop={quickSearchBarTop}
          selectedRowKeys={this.state.selected}
          onRowSelect={this.onRowSelect}
          onRowClick={this.onRowClick}
          renderSectionHeader={this.renderHeader}
          customRenderContent={this.customRenderItem}
          onQuickSearch={this.onQuickSearch}
          onQuickSearchTop={this.onQuickSearchTop}
          className={'demo-list'}
        />
      </div>
    );
  }
}
```

### 滑动操作

滑动操作

```jsx
import React from 'react';
import { MList, MListData, SwipeAction } from '@weapp/ui';
import imgSrc from "../../../../assets/images/dKbkpPXKfvZzWCM.png"
// import '../style/index.m.less'

const style = { height: '300px' }

const data4 = [
  {
    id: '1',
    icon: imgSrc,
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    id: '2',
    icon: "Icon-mailbox",
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    id: '3',
    icon: imgSrc,
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
]

export default class ListDemo extends React.Component {
  state = {
    selected: []
  }

  onRowSelect = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected: arr })
  }

  customRenderItem2 = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <SwipeAction
        style={{
          width: '100%',
          height: '100%'
        }}
        key={rowID}
        autoClose
        right={[
          {
            text: 'Add',
            onPress: () => console.log('cancel'),
            style: { backgroundColor: '#ddd', color: 'white' },
          },
          {
            text: 'Delete',
            onPress: () => console.log('delete'),
            style: { backgroundColor: '#F4333C', color: 'white', width: 100 },
          },
        ]}
        left={[
          {
            text: 'Reply',
            onPress: () => console.log('reply'),
            style: { backgroundColor: '#108ee9', color: 'white' },
          },
          {
            text: 'Cancel',
            onPress: () => console.log('cancel'),
            style: { backgroundColor: '#ddd', color: 'white' },
          },
        ]}
      >
        {obj.title}
      </SwipeAction>
    );
  }
  render() {
    return (
      <div>
        <h4>自定义渲染</h4>
        <MList
          data={data4}
          style={style}
          customRenderContent={this.customRenderItem2}
          className={'demo-list'}
        />
      </div>
    );
  }
}
```

### 模版

模版

```jsx
import React from 'react';
import { MList, MListData } from '@weapp/ui';

const style = { height: '300px' }
const template1 = {
  default: {
    theme: 'col1_row2',
    dataKeys: ['title', 'user', 'time'],
  },
}
const template2 = {
  default: [
    {
      key: 'col1',
      configs: [
        {
          key: 'col1_row1',
          configs: [
            { key: 'title' },
          ],
        },
        {
          key: 'col1_row2',
          configs: [
            { key: 'des' },
          ],
        },
        {
          key: 'col1_row3',
          configs: [
            { key: 'user' },
            {
              key: 'time',
              style: { float: 'right',marginRight:'15px' },
            },
          ],
        },
      ],
    },
  ],
}
export default class ListDemo extends React.Component {

  state = {
    data: [0, 1, 2, 3, 4].map((item, i) => ({
      title: `这里是数据的标题(${item})`,
      id: `id_${i}`,
      user: `用户_${i}`,
      time: `2018-09-0${i}`,
      des: `这里是非常详细的描述_${i}`,
    })),
    selected: [],
  }

  onRowSelect = (arr: Array<MListData> | Array<string>) => {
    this.setState({ selected: arr })
  }
  render() {
    const {selected} = this.state;
    return (
      <div>
        <h4>模板</h4>
        <MList
          template={template1}
          showCheck
          selectedRowKeys={selected}
          data={this.state.data}
          // customRenderContent={this.customRenderItem5}
          style={style}
          onRowSelect={this.onRowSelect}
        />
        <h4>模版 - 2</h4>
        <MList
          template={template2}
          showCheck
          selectedRowKeys={selected}
          data={this.state.data}
          // customRenderContent={this.customRenderItem5}
          style={style}
          onRowSelect={this.onRowSelect}
        />
      </div>
    );
  }
}
```

### 拖拽+分组索引

拖拽+分组索引

```jsx
import React from 'react';
import {
  MList,
  Icon,
  MListData,
  ListData,
  ListGroupData
} from '@weapp/ui';
import { datas, dataGroupTitle1 } from '../mock';
// import '../style/index.m.less'

const iconSortableData: ListData[] = datas.map((i, index) => {
  return {
    id: String(index),
    icon: <Icon name="Icon-move" className="my-handle" />,
    title: `Meet hotel${index}`,
    type: i?.type
  }
})

const style1 = { width: '100%', height: '200px' }
const style2 = { width: '100%' }
const style3 = { height: '600px', border: '1px solid red' }
export default class ListDemo extends React.Component {
  state = {
  }

  customRenderItem = (rowData: MListData, rowID: number) => {
    const obj = rowData;
    return (
      <div key={rowID} style={{ padding: '0 15px', margin: '5px', border: '1px solid #ddd' }} >
        <div
          style={{
            lineHeight: '50px',
            color: '#888',
            fontSize: 18,
            borderBottom: '1px solid #F6F6F6',
          }}
        >{obj.title}</div>
        <div style={{ display: 'flex', padding: '15px 0' }}>
          <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />
          <div style={{ lineHeight: 1 }}>
            <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div>
            <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>{rowID}</span>¥</div>
          </div>
        </div>
      </div>
    );
  }

  customRenderItem2 = (item: MListData) => <div style={{ height: '40px', lineHeight: '40px' }}>
    {/*<Icon name="Icon-move" className="my-handle" />*/}
    <span>{item.title}</span>
  </div>

  customRenderItem6 = (rowData: ListData, rowID: number) => {
    const obj = rowData;
    return (
      <div key={rowID} style={{ padding: '0 15px' }}>
        <div
          style={{
            color: '#888',
            fontSize: 18,
          }}
        >{obj.title}</div>
      </div>
    );
  }

  renderSectionHeader = (sectionData?: ListGroupData) => (
    <div
      key={sectionData?.id}
      style={{ width: '100%', height: '100%', lineHeight: '35px', backgroundColor: '#ddd' }}
    >我是分组标题:{sectionData?.content}
    </div>
  )

  render() {
    console.log('iconSortableData', iconSortableData)
    return (
      <div>
        {/* <h4>横向拖拽 超出换行</h4>
        <MList sortable={true} direction="row"
          style={style1}
          data={datas}
          customRenderContent={this.customRenderItem}
        />
        <h4>横向拖拽 超出滚动</h4>
        <MList sortable={true} direction="row" horizontalScroll
          style={style2}
          data={datas}
          customRenderContent={this.customRenderItem}
        /> */}
        <h4>指定拖拽手柄(长按左边图标进行拖拽)</h4>
        <MList
          data={iconSortableData}
          style={style3}
          sortable
          showDataGroupByType
          sortableCrossGroup
          direction={'column'}
          dataGroupTitle={dataGroupTitle1}
          sortableOptions={{ handle: '.my-handle', delay: '300' }}
          renderSectionHeader={this.renderSectionHeader}
          customRenderContent={this.customRenderItem2}
          showImg
          // customRenderContent={this.customRenderItem6}
          className={'demo-list-sortable'}
        />
      </div>
    );
  }
}
```

### 虚拟列表

基于大数据量下的复杂渲染列表，支持同时渲染10w+数据

```jsx
import React from 'react';
import { MList, ListData } from '@weapp/ui';

const datas: any[] = [];
for (let i = 0; i < 200000; i++) {
  datas.push({
    key: i,
    id: i,
    tel: i+1,
    depart: `开发${i+1}部`,
  });
}

export default class ListDemo extends React.Component {
  state = {
    activeRows: [],
    data: datas,
    isShow: false,
  }

  customRenderItem = (item: ListData) => <div style={{ height: '40px', lineHeight: '40px' }}>
    <span style={{ marginLeft: '10px' }}>
      {item.depart}
    </span>
  </div>

  render() {
    return (
      <div>
        <h3>同时渲染20w条数据</h3>
        <MList
              direction="column"
              data={datas}
              customRenderContent={this.customRenderItem}
              bordered={true}
              isStopMouseDown={true}
              virtualMode={true}
              virtualModeProps={{
                defaultRowHeight: 40,
                minContainerHeight: 360
              }}
        />
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| showCheck | 显示可选 | boolean | 否 | false |
| stopCheckboxPropagation | 是否阻止check框点击事件的冒泡 | boolean | 否 | false |
| checkboxPosition | check 框位置 | 'left' \| 'right' | 否 | false |
| checkStyle | check 框样式 | CSSProperties | 否 |  |
| noBorder | 是否显示边框 | boolean | 否 | false |
| template | 模板 | any | 否 |  |
| templateType | 模板类型 | string | 否 |  |
| expandTemplate | 模板扩展,在模板渲染的基础上进行扩展 | (templateCom: ReactNode, data: ListData[]) => ReactNode | 否 |  |
| getTemplate | 重写模板的钩子函数 | (template: any) => void | 否 |  |
| showPopover | 显示气泡框 | boolean | 否 | false |
| popoverProps | 气泡框属性 | PopoverProps | 否 |  |
| renderPopup | 渲染气泡框内容 | (data?: ListData, index?: number) => void | 否 |  |
| customRenderContent | 自定义 html 模板渲染 Item 的内容布局,用组件内部的 Item 包裹,具有统一的默认样式和属性 | (rowData: ListData\|ListData[], rowIndex: number) => ReactNode | 否 |  |
| customRenderItem | 自定义渲染 Item,不用组件内部的 Item 包裹,不具有统一的默认样式和属性 | (rowData: ListData, rowIndex: number) => ReactNode | 否 |  |
| direction | 横向或纵向显示 | 'column' \| 'row' | 否 | 'row' |
| horizontalScroll | 横向显示时,超出区域是滚动还是换行,默认换行 | boolean | 否 | true |
| sortable | 是否可拖拽排序 | boolean | 否 | false |
| sortableOptions | 拖拽相关的方法,参考sortablejs 文档 | object | 否 |  |
| onSortEnd | 拖拽结束回调 | (data: ListData[]) => void | 否 |  |
| multipleCheck | 多选或单选 | boolean | 否 |  |
| data | 列表数据 | Array | 是 |  |
| selectedRowKeys | 选中行主键的集合 | Array \| Array | 否 |  |
| onRowSelect | 行选中事件 | (selectedRowKeys: Array \| Array, selectedData?: ListData[]) => void | 否 |  |
| onEndReachedThreshold | 调用 onEndReached 之前的临界值，单位是像素 | number | 否 | 10 |
| scrollEventThrottle | 控制在滚动过程中，scroll 事件被调用的频率 | number | 否 |  |
| showImg | 是否显示图标 | boolean | 否 | false |
| showOrder | 是否显示序号 | boolean | 否 | false |
| initialOrder | 初始序号 | number | 否 |  |
| customRenderOrder | 自定义渲染序号 | (rowIndex: number \| string) => ReactNode | 否 |  |
| paginationProps | 分页属性 | PaginationProps | 否 |  |
| renderHeader | 列表头部 | (() => ReactNode) \| string \| JSX.Element | 否 |  |
| renderFooter | 列表尾部 | (() => ReactNode) \| string \| JSX.Element | 否 |  |
| pullToRefresh | 拉动刷新 | ReactNode | 否 |  |
| customRender | 自定义渲染 | (_: any, ele: ReactNode) => ReactNode | 否 |  |
| onRowClick | 行点击事件 | (data?: ListData, index?: number) => void | 否 |  |
| isClickable | 根据每行数据决定是否绑定点击事件 | (data: ListData, index: number, childData?: AnyObj[]) => boolean | 否 |  |
| onEndReached | 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足 onEndReachedThreshold 个像素的距离时调用 | () => void | 否 |  |
| onScroll | 滚动事件 | (e: Event) => void | 否 |  |
| renderSectionHeader | 如果提供了此函数，会为每个小节(section)渲染一个标题 | (sectionData?: GroupData) => ReactNode | 否 |  |
| indexedIdentities | 索引信息 | GroupData[] | 否 |  |
| quickSearchBarTop | 快捷导航栏最顶部按钮、常用于回到顶部 | GroupData | 否 |  |
| quickSearchBarStyle | quickSearchBar 的 style | CSSProperties | 否 |  |
| onQuickSearchTop | 快捷导航栏最顶部按钮点击调用 | (quickSearchBarTop?: GroupData) => void | 否 |  |
| onQuickSearch | 快捷导航切换时调用 | (sectionData: GroupData, sectionIndex: number) => void | 否 |  |
| loading | 是否正在加载数据(为 true 时 onEndReached 不会触发) | boolean | 否 | false |
| hasMore | 是否还有更多数据(为 false 时 onEndReached 不会触发) | boolean | 否 | true |
| activeRows | 点击选中的行 | Array | 否 |  |
| withSwipeAction | 显示左右滑动手势菜单 | Boolean | 否 | false |
| swipeActionProps | 左右滑动手势菜单属性，参考SwipeAction | Object | 否 | {} |
| customerSortableGroupOptions | 自定义分组的group配置项 | (groupData: object) => string \| object | 否 | false |
| getSortableInstance | 获取sortable实例 | (instance: object \| object[]) => void | 否 |  |
| virtualMode | 是否开启虚拟列表模式 | boolean | 否 | false |
| virtualModeProps | 虚拟列表配置参数 | IVirtualModeProps | 否 | - |
### paginationProps 分页配置 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| PaginationProps | 分页器配置，详情见 组件 Pagination API 说明 | boolean |  |  |
| paginationType | 分页模式 | 'scroll' \| 'part' |  | 'scroll' |
### IVirtualModeProps 虚拟列表配置 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| defaultRowHeight | 默认行高 | number |  | 40 |
| getItemSize | 动态计算列表每行高度 | (index?: number) => number |  |  |
| minContainerHeight | 列表容器初始化默认最小高度 | number |  | 300 |
> list 默认不会渲染内容，内容需要自定义或设置模版进行渲染！！！
