vue-virtual-scroller-list虚拟滚动

vue-virtual-scroller-list虚拟滚动

• 一个虚拟滚动组件，用来处理非常长的或者无限滚动的列表。
• 通过不渲染可视区域以外的内容，显示虚拟的滚动条来
• 将可视区域范围内的条目渲染出来，用户滚动，会处理滚动行为(虚拟的滚动条)，动态重新执行更新渲染。dom复用，不需要消耗太多资源，滚动时，cpu换内存，提升页面性能

安装，打包后项目运行也需要用。

npm install vue-virtual-scroll-list

页面使用

<template>
  <div>
    <virtual-list
      style="height: 300px; overflow-y: auto"
      class="virtual-list"
      :data-key="'id'"
      :data-sources="goodsList"
      :data-component="itemComponent"
      :extra-props="{
        itemClick: itemClick,
        current: current,
      }"
    />
  </div>
  <!-- 
      data-key:循环内容的key,
      data-sources:循环的数据
      data-component:循环的内容,这里由VirtualItem.vue
      extra-prop:其他要传入循环内容的props
   -->
</template>
<script>
import VirtualList from "vue-virtual-scroll-list";
import VirtualItem from "./VirtualItem";
export default {
  name: "",
  components: {
    VirtualList,
  },
  data() {
    return {
      itemComponent: VirtualItem, //虚拟滚动组件循环对象
      current: "",
      goodsList: [//要循环的数据
        { id: "1", value: "商品1" },
        { id: "2", value: "商品2" },
        { id: "3", value: "商品3" },
        { id: "4", value: "商品4" },
        { id: "5", value: "商品5" },
        { id: "6", value: "商品6" },
        { id: "7", value: "商品7" },
        { id: "8", value: "商品8" },
        { id: "9", value: "商品9" },
        { id: "10", value: "商品10" },
        { id: "11", value: "商品11" },
        { id: "12", value: "商品12" },
        { id: "13", value: "商品13" },
        { id: "14", value: "商品14" },
      ], 
    };
  },
  methods: {
    itemClick(inedx) {
        console.log(inedx);
    },
  },
};
</script>

这里将循环对象单独写了一个VirtualItem.vue文件

<template>
  <div
    class="item"
    @mouseover="itemClick(index)"
  >
    {{ this.source.value }} <!--这里简单的输出了行数据里的value-->
  </div>
</template>
<script>
export default {
  props: {
    // 每一行的索引,基础props，不用传递
    index: {
      type: Number
    },
    // 每一行的内容,基础props，不用传递
    source: {
      type: Object,
      default() {
        return {}
      }
    },
    current: String,
    itemClick: Function
  }
}
</script>

学习：
官方文档