如何在Vue.js中使用vue-virtual-scroll-list实现虚拟滚动？

核心错误点 #

• 未引入和注册vue-virtual-scroll-list组件
• virtual-list组件的绑定参数配置错误
• 额外写了全局v-for遍历所有数据，导致全量渲染覆盖了虚拟滚动逻辑
• estimate-size参数设置错误，该值为单条列表的预估高度（单位px），不能设置为3

具体修改步骤 #

1. 定义单条列表渲染子组件 #

vue-virtual-scroll-list要求传入自定义组件渲染每一项，需要先定义接收source参数的子组件，source对应每一条数据源。

2. 注册虚拟滚动组件和自定义子组件 #

3. 修正virtual-list参数 #

• data-key：填数据源中唯一标识的属性名，示例中用name，如果存在重复建议给每条数据加唯一id字段
• data-sources：绑定完整的数据源数组items
• data-component：绑定刚才定义的单条渲染子组件
• estimate-size：填写和单条列表高度匹配的数值，示例中为30

4. 删除虚拟列表外的全局v-for渲染代码 #

完整可运行代码 #

<template>
  <div id="app">
    <div class="wrapper">
      <virtual-list
        class="list"
        style="height: 360px; overflow-y: auto"
        :data-key="'name'"
        :data-sources="items"
        :data-component="ItemComponent"
        :estimate-size="30"
      />
    </div>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'

// 单条列表渲染组件
const ItemComponent = {
  props: {
    source: {
      type: Object,
      required: true
    }
  },
  template: `<div class="item" style="height: 30px; line-height: 30px;"><div class="id">{{ source.price }} {{ source.name }}</div></div>`
}

export default {
  name: 'App',
  components: {
    VirtualList,
    ItemComponent
  },
  data() {
    return {
      items: [
        { price: '1', name: 'mm' },
        { price: '22', name: 'aa' },
        { price: '55', name: 'dd' },
        { price: '77', name: 'gg' },
        { price: '123', name: 'kk' },
        { price: '53', name: 'mn' },
        { price: '11', name: 'mm2' },
        { price: '22', name: 'a' },
        { price: '33', name: 'd' },
        { price: '77', name: 'g' },
        { price: '1283', name: 'k' },
        { price: '589', name: 'n' }
      ]
    }
  }
}
</script>

<style scoped>
.item {
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
</style>

优化提示 #

如果列表项高度不固定，可以给virtual-list加variable属性开启自适应高度，避免滚动位置偏移。

内容的提问来源于stack exchange，提问作者user17525310