虚拟列表 Virtual List

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

使用

API

用法示例

基本用法

• index.html
• index.js

code

<ti-virtual-list id="virtual-list"></ti-virtual-list>

window.onload = function(){
  var vl = document.querySelector('#virtual-list');
  vl.setRenderItem(item => {
    return `<div style="height: 50px; background: red; width: 100%;">${item}</div>`;
  });
  var data = [];
  vl.addEventListener('load', function () {
    data = data.concat(
      Array(10)
        .fill(0)
        .map((_, idx) => (data[data.length - 1] || 0) + idx + 1),
    );
    vl.setListData(data);
  });
} 

TiVirtualList API

属性 Properties

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

事件 Events

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

CSS 变量 CSS Variables

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