虚拟列表 Virtual List

虚拟列表，常用于渲染数据量非常大的列表，通过渲染当前的可视区域，区域外的内容在用户滚动到可视区域内之后再渲染，以保障页面的流畅。

使用

API

安装使用

import { TiVirtualList } from '@titian-design/mobile-react';

用法示例

基本使用

codesanbox

copy

code

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { TiVirtualList } from 'titian-h5-react';

export default function App() {
  const virtualListRef = useRef<HTMLTiVirtualListElement>(null);
  const [data, setData] = useState<number[]>([]);

  useEffect(() => {
    virtualListRef.current?.setListData(data);
  }, [data.length]);

  useEffect(() => {
    virtualListRef.current?.setRenderItem(
      item =>
        `<div style="height: 50px; width: 100%;display: flex; align-items: center;justify-content: center;">${item}</div>`,
    );
  }, []);

  const handle = useCallback(() => {
    setData(prev =>
      prev.concat(
        Array(10)
          .fill(0)
          .map((_, idx) => (prev[prev.length - 1] || 0) + idx + 1),
      ),
    );
  }, []);

  return (
    <div className="code-container">
      <div className="content" style={{ height: 400, overflow: 'hidden' }}>
        <TiVirtualList ref={virtualListRef} onLoad={handle} containerHeight={368} />
      </div>
    </div>
  );
}

TiVirtualList API

属性 Properties

名称	类型	必填	默认值	说明	备注
containerHeight	number	否	当前 document 高度	容器高度	-
itemHeight	number	否	50	节点高度	-
extStyle	string	否	-	根节点样式	-

事件 Events

名称	参数列表	描述	备注
onLoad	(e: CustomEvent<never>) => void	滚动到底部时触发	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--virtual-list-width	100%	虚拟列表宽度	-
--virtual-list-background-color	#fff	虚拟列表背景色	-