virtual-list（虚拟列表）

基础用法

示例：

代码示例：

<template>
  <div style="height: 650px">
    <virtual-list
      style="height: 100%; overflow-y: auto"
      :data-key="'id'"
      :data-sources="list"
      :data-component="itemComponent"
      :keeps="20"
      :extra-props="{
        address,
        basisInfo,
      }"
      @tobottom="listToBottom"
    />
  </div>
</template>

<script>
import itemComponent from "./itemComponent";
export default {
  data() {
    return {
      itemComponent,
      list: [],
      address: { province: "江苏", city: "南京" },
      basisInfo: [{ age: 20 }],
    };
  },
  components: {},
  methods: {
    content() {
      for (let i = 0; i < 10000; i++) {
        const obj = { id: i, name: `人员${i}` };
        this.list.push(obj);
      }
    },
    listToBottom() {
      console.log("到底了哦");
    },
  },
  mounted() {
    this.content();
  },
};
</script>

<template>
  <div>
    编号：{{ index }} <br />
    姓名：{{ source.name }}<br />
    年龄：{{ basisInfo[0].age }}<br />
    地址：{{ address.province }}-{{ address.city }}
    <hr />
  </div>
</template>

<script>
export default {
  name: "item-component",
  props: {
    // index of current item
    index: {
      type: Number,
    },
    source: {
      type: Object,
      default() {
        return {};
      },
    },
    address: {
      type: Object,
      default() {
        return {};
      },
    },
    basisInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {},
};
</script>

属性：

参数	说明	类型	可选值	默认值
dataKey	唯一键来自每个数据对象中的 data-sources。或者使用每个 data-sources 调用的函数并返回它们的唯一键。它的值在 data-sources 中必须是唯一的，用于标识节点大小。（必填）	[String, Function]	-	-
dataSources	列表构建的源数组，每个数组数据必须是一个对象，并且有一个唯一的 key 或 generate for data-key 属性。（必填）	Array	-	-
dataComponent	由 vue 创建 / 声明的渲染项组件，将使用 data-sources 中的数据对象作为渲染 prop 并命名为：source。（必填）	[Object, Function]	-	-
keeps	虚拟列表在真实 dom 中保持渲染的节点数量。	Number	-	30
extraProps	额外的参数（不在 data-sources 中的）分配给节点组件。注意：index 和 source 都已被占用。	Object	-	-
estimateSize	每个节点的预计尺寸，如果更接近平均尺寸，滚动条长度看起来更准确。建议：分配自己计算的平均值。	Number	-	50
direction	滚动方向，可用值为 vertical 和 horizontal。	String	'vertical'，'horizontal'	'vertical'
start	设置滚动位置停留开始索引。	Number	-	0
offset	设置滚动位置保持偏移。	Number	-	0
topThreshold	触发 totop 事件的阈值，注意：多次调用	Number	-	0
bottomThreshold	触发 tobottom 事件的阈值，注意：多次调用	Number	-	0
pageMode	设置虚拟列表使用全局文档滚动列表。	Boolean	-	false
rootTag	根元素标记名称。	String	-	'div'
wrapTag	包裹元素（role = item）标签名称。	String	-	'div'
wrapClass	包裹元素类名。	String	-	''
wrapStyle	节点包裹元素内联样式。	Object	-	-
itemTag	包裹元素（role = item）标签名称。	String	-	'div'
itemClass	包裹元素类名。	String	-	''
itemClassAdd	可将额外的类（字符串）返回到节点包裹元素参数（索引）的函数。	Function	-	-
itemStyle	节点包裹元素内联样式。	Object	-	-
headerTag	对于使用头槽，头槽包裹元素（role = header）标签名称。	String	-	'div'
headerClass	对于使用头槽，头槽包裹元素类名。	String	-	''
headerStyle	对于使用头槽，头槽包裹元素内联样式。	Object	-	-
footerTag	对于使用页脚槽，页脚槽包裹元素（role = footer）标签名称。	String	-	'div'
footerClass	对于使用页脚槽，页脚槽包裹元素类名。	String	-	''
footerStyle	用于使用页脚槽、页脚槽包裹元素内联样式。	Object	-	-
itemScopedSlots	节点组件的 $scopedSlots。	Object	-	-

事件：

事件名	说明	参数	参数说明
resized	调整项目大小时发出 (mounted)，回调参数 (id, size)。	id, size	-
scroll	滚动时发出，回调参数（event, range）	evt, range	-
totop	滚动到顶部或左侧时发出，无参数。	-	-
tobottom	滚动到底部或右侧时发出，无参数。	-	-

方法：

方法名	说明	参数	参数说明
getSize	通过 id 获取指定的 item 大小（来自 data-key value）。	id	-
getSizes	获取存储（渲染）节点的总数。	-	-
getOffset	获取当前滚动偏移量。	-	-
getClientSize	获取包裹元素视口大小（宽度或高度）。	-	-
getScrollSize	获取所有滚动大小（scrollHeight 或 scrollWidth）。	-	-
scrollToOffset	手动将滚动位置设置为指定的偏移量。	offset	-
scrollToIndex	手动将滚动位置设置为指定的索引。	index	-
scrollToBottom	手动将滚动位置设置为底部。	-	-
updatePageModeFront	当使用页面模式和虚拟列表根元素 offsetTop 或 offsetLeft 变化时，需要手动调用该方法。	-	-
reset	将所有状态重置回初始状态。	-	-