📜 酷库 - 虚拟列表

SLYLXDYMJ

字数：245 字

时长：1 分钟

整合各种情况下虚拟列表的实用库

vue-virtual-scroller

https://github.com/Akryum/vue-virtual-scroller

使用例子

用 scroll-end 事件可以实现滚动加载
不支持 table 结构，不过用 div 模拟 table 结构可以实现

  <!-- items 和 item-size 是必须传入的 -->
  <!-- item-size 可以不写，代表动态高度，需要在项数据里指定 size 表示高度 -->
  <Recycle-Scroller
    :items="list"
    :item-size="32">

    <template slot="before">
      before
    </template>

    <template slot-scope="{ item, index }">
      <div class="td">{{ item.name }}</div>
    </template>
    
    <template slot="after">
      after
    </template>

  </Recycle-Scroller>

vue-virtual-scroll-list

https://github.com/tangbc/vue-virtual-scroll-list

使用例子

暂时没用过，感觉不如 vue-virtual-scroller，不能使用 slot。

@wchbrad/vue-easy-tree

树状结构虚拟列表，基于 element-ui 和 vue-virtual-scroller

使用例子

相对于 element-ui 的 tree 好像只加了 height prop 即可实现。