Vue.js 2的自动虚拟滚动列表 - vue-auto-virtual-scroll-list

Vue.js 2的自动虚拟滚动列表 - vue-auto-virtual-scroll-list
插件名称 vue-auto-virtual-scroll-list
发布时间 2020年10月20日
插件作者 cristovao-trevisan

虚拟列表的高级Vue.js 2.x组件,在渲染之前未知每个项目的高度。

通过累加每个项目的高度以查看可容纳多少个组件,来计算渲染组件的数量 totalHeight。假定每个项目的高度均为 defaultHeight,直到实际渲染为止。发生这种情况时,将缓存正确的值并将其用于以后的计算

变更日志:

10/03/2019

  • 添加向后滚动,setIndex方法并重构更新/暂停的钩子

安装和下载:

# NPM
$ npm install vue-auto-virtual-scroll-list --save

用法

带模板

<template>
  <VueAutoVirtualScrollList
    :totalHeight="800"
    :defaultHeight="80"
    style="width: 100%;"
  >
    <div
      v-for="item in items"
        :style="{ height: `${item.height}px` }"
    >
      {{ item.name }}
    </div>
  </VueAutoVirtualScrollList>
</template>

<script>
import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'

export default {
  ...
  components: { VueAutoVirtualScrollList },
  ...
}
</script>

使用jsx

import VueAutoVirtualScrollList from 'vue-auto-virtual-scroll-list'

export default {
  ...
  render(h) {
    return (
      <VueAutoVirtualScrollList
        totalHeight={800}
        defaultHeight={80}
      >
        {items.map((item) => (
          <div style={{ height: `${item.height}px` }}>
            { item.name }
          </div>
        ))}
      </VueAutoVirtualScrollList>
    )
  },
  ...
}

方法

setIndex(index: number)

滚动到的项目index。此方法尚未稳定或未经测试。