虚拟列表 Virtual List

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

使用

API

安装使用

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

用法示例

基本使用

codesanbox

copy

code

<template>
  <div class="code-container">
    <div class="content" :style="{ height: '400px', overflow: 'hidden' }">
      <TiVirtualList ref="virtualListRef" @load="handle" :containerHeight="368" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';
import { TiVirtualList } from 'titian-h5-vue';

const data = ref<any[]>([]);

const virtualListRef = ref<any>(null);

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

watch(data, () => {
  virtualListRef.value.$el?.setListData(data.value);
});

function handle() {
  const prev = data.value;
  data.value = prev.concat(
    Array(10)
      .fill(0)
      .map((_, idx) => (prev[prev.length - 1] || 0) + idx + 1),
  );
}
</script>

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	虚拟列表背景色	-