VirtualList 虚拟滚动列表

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

主要用于解决大数据情况下的渲染速度问题。组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/55329238

API

VirtualList

参数说明类型默认值
children渲染的子节点any-
minSize最小加载数量Number1
pageSize一屏数量Number10
itemsRenderer父渲染函数，默认为 (items, ref) => {items}签名:Function() => voidFunction(items, ref) => <ul ref={ref}>{items}</ul>
threshold缓冲区高度Number100
itemSizeGetter获取item高度的函数签名:Function() => voidFunction-
jumpIndex设置跳转位置，需要设置 itemSizeGetter 才能生效, 不设置认为元素等高并取第一个元素高度作为默认高Number0

代码示例

简单用法

使用 VirtualList 最简单的例子。

VirtualList 虚拟滚动列表 - 图1

查看源码在线预览

  1. import { VirtualList } from '@alifd/next';
  3. const dataSource = [];
  5. const generateLi = (index = 'index') => {
  6.     const data = [];
  7.     if (index % 3 === 0) {
  8.         return <li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>;
  9.     } else {
  10.         return <li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>;
  11.     }
  12. };
  14. for (let i = 0; i < 1000; i++) {
  15.     dataSource.push(generateLi(i));
  16. }
  18. const demo = (
  19.     <div className={'virtual-box'}>
  20.         <VirtualList>
  21.             {dataSource}
  22.         </VirtualList>
  23.     </div>
  24. );
  27. ReactDOM.render(demo, mountNode);
  1. .virtual-box {
  2.     height: 200px;
  3.     width: 200px;
  4.     border: 1px solid #ddd;
  5.     overflow: auto;
  6. }
  7. .virtual-box ul {
  8.     padding: 0;
  9.     margin: 0;
  10.     list-style: none;
  11. }
  12. .virtual-box li {
  13.     padding-left: 10px;
  14.     border-bottom: 1px solid #333;
  15. }

设置初始位置

使用 jumpIndex 设置初始位置

VirtualList 虚拟滚动列表 - 图2

查看源码在线预览

  1. import { VirtualList } from '@alifd/next';
  3. const dataSource = [];
  5. function generateLi(index) {
  6.     return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);
  7. }
  8. function generateData(len) {
  9.     for (let i = 0; i < len; i++) {
  10.         dataSource.push(generateLi(i));
  11.     }
  12. }
  14. class App extends React.Component {
  15.     state = {
  16.         initial: 50,
  17.         dataSource: generateData(1000)
  18.     }
  19.     onClick() {
  20.         this.setState({
  21.             initial: this.state.initial + 20
  22.         });
  23.     }
  24.     render() {
  25.         return (
  26.             <div>
  27.                 <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>
  28.                 <br/>
  29.                 <br/>
  30.                 <div className={'virtual-box'}>
  31.                     <VirtualList ref="virtual" jumpIndex={this.state.initial}>
  32.                         {dataSource}
  33.                     </VirtualList>
  34.                 </div>
  35.             </div>
  36.         );
  37.     }
  38. }
  40. ReactDOM.render(<App />, mountNode);
  1. .virtual-box {
  2.     height: 200px;
  3.     width: 200px;
  4.     border: 1px solid #ddd;
  5.     overflow: auto;
  6. }
  7. .virtual-box ul {
  8.     padding: 0;
  9.     margin: 0;
  10.     list-style: none;
  11. }
  12. .virtual-box li {
  13.     padding-left: 10px;
  14.     border-bottom: 1px solid #333;
  15. }

不等高的item

使用 jumpIndex 设置初始位置, 并设置 itemSizeGetter

VirtualList 虚拟滚动列表 - 图3

查看源码在线预览

  1. import { VirtualList } from '@alifd/next';
  3. const dataSource = [];
  5. function generateLi(index) {
  6.     if (index % 3 === 0) {
  7.         return (<li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>);
  8.     } else {
  9.         return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);
  10.     }
  11. }
  12. function generateData(len) {
  13.     for (let i = 0; i < len; i++) {
  14.         dataSource.push(generateLi(i));
  15.     }
  16. }
  18. class App extends React.Component {
  19.     state = {
  20.         initial: 20,
  21.         dataSource: generateData(1000)
  22.     }
  24.     componentDidMount() {
  25.         setTimeout(() => {
  26.             const instance = this.refs.virtual.getInstance();
  27.             instance.scrollTo(50);
  28.         }, 200);
  30.     }
  32.     getHeight(index) {
  33.         return index % 3 === 0 ? 30 : 20;
  34.     }
  36.     onClick() {
  37.         this.setState({
  38.             initial: this.state.initial + 20
  39.         });
  40.     }
  42.     render() {
  43.         return (
  44.             <div>
  45.                 <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>
  46.                 <br/>
  47.                 <br/>
  48.                 <div className={'virtual-box'}>
  49.                     <VirtualList ref="virtual" jumpIndex={this.state.initial} itemSizeGetter={this.getHeight.bind(this)}>
  50.                         {dataSource}
  51.                     </VirtualList>
  52.                 </div>
  53.             </div>
  54.         );
  55.     }
  56. }
  58. ReactDOM.render(<App />, mountNode);
  1. .virtual-box {
  2.     height: 200px;
  3.     width: 200px;
  4.     border: 1px solid #ddd;
  5.     overflow: auto;
  6. }
  7. .virtual-box ul {
  8.     padding: 0;
  9.     margin: 0;
  10.     list-style: none;
  11. }
  12. .virtual-box li {
  13.     padding-left: 10px;
  14.     border-bottom: 1px solid #333;
  15. }

相关区块

VirtualList 虚拟滚动列表 - 图4

暂无相关区块