Vue.js的虚拟滚动网格 - vue-virtual-grid

Vue.js的虚拟滚动网格 - vue-virtual-grid
插件名称 vue-virtual-grid
发布时间 2020年10月21日
插件作者 Mikescops

一个Vue.js组件,用于使用CSS Grid Layout渲染高性能的虚拟滚动网

安装和下载:

# NPM
$ npm i vue-virtual-grid --save

更多功能:

  • 支持任何Vue.js组件。
  • 也支持无限滚动。

如何使用它:

1.导入组件。

import VirtualGrid from ‘vue-virtual-grid’;

2.注册组件。

components: {
  VirtualGrid,
  // ...
},

3.将虚拟网格添加到模板。

<VirtualGrid
  :items="yourDataSet"
  :updateFunction="yourGetDataFunction"
  :getGridGap="yourFunction"
  :getColumnCount="yourFunction"
  :getWindowMargin="yourFunction"
  :getItemRatioHeight="yourFunction"
  :updateTriggerMargin="number"
  :loader="loaderComponent"
  :debug="false"
/>

4.在items对象中定义数据集。

{
  // unique ID
  id: string,
  // 自定义参数,传递一个包含所需内容的对象(可选)
  injected?: string, 
  // 项目的原始高度
  height: number, 
  // 项目的原始宽度(可选:如果未设置,则不通过getItemRatioHeight调整高度)
  width?: number, 
  // 有多少列将使用您的项(如果需要全宽,请设置0)
  columnSpan: number, 
  // 如果项目应该出现在下一行(可选)
  newRow?: boolean, 
  // 用于呈现项(作为prop“item”传递)的VueJS组件(您选择的自定义模板)
  renderComponent: Component 
}

变更日志:

v2.3.0(12/16/2020)

  • 更好的无限滚动渲染