用vue实现一个虚拟列表

最新推荐文章于 2024-05-28 14:27:53 发布

「已注销」

最新推荐文章于 2024-05-28 14:27:53 发布

阅读量455

点赞数

分类专栏： vue

本文为博主[pan-zy]原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/sd4015700/article/details/119150462

版权

本文介绍了如何使用Vue来实现一个虚拟列表，重点在于固定高度的简单实现方式，包括源码解析和测试过程。同时，提到了虚拟列表的实现原理，并推荐了几篇相关参考文章，如前端虚拟列表的实现和虚拟树的性能优化。

摘要由CSDN通过智能技术生成

固定高度简单实现方式

源码

<template>
  <div class="wrapper" ref="wrapper">
    <div :style="{paddingTop:`${paddingTop}px`,paddingBottom:`${paddingBottom}px`}">
      <div v-for="item in showList" :key="item[_key]" :style="{height:`${itemHeight}px`}">
        {
  { item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PanVirtualList",
  props: {
    /**
     * list的每一項中，作为key的字段
     */
    _key: {
      type: String,
      required: true
    },
    /**
     * 所有数据
     */
    list: {
      type: Array,
      default: () => []
    },
    /**
     * 单个数据项的高度
     */
    itemHeight: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      /**
       * 展示数据段的开始位置
       */