首页 > 其他分享 >虚拟列表

虚拟列表

时间:2024-08-27 23:47:45浏览次数:10  
标签:return listData 列表 start 虚拟 scrollTop itemSize

<template>
  <div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
    <div class="infinite-list-phantom" :style="{ height: listHeight + 'px' }"></div>
    <div class="infinite-list" :style="{ transform: getTransform }">
      <div ref="items"
        class="infinite-list-item"
        v-for="item in visibleData"
        :key="item.id"
        :style="{ height: itemSize + 'px',lineHeight: itemSize + 'px' }"
      >{{ item.value }}</div>
    </div>
  </div>
</template>
export default {
  name:'VirtualList',
  props: {
    //所有列表数据
    listData:{
      type:Array,
      default:()=>[]
    },
    //每项高度
    itemSize: {
      type: Number,
      default:200
    }
  },
  computed:{
    //列表总高度
    listHeight(){
      return this.listData.length * this.itemSize;
    },
    //可显示的列表项数
    visibleCount(){
      return Math.ceil(this.screenHeight / this.itemSize)
    },
    //偏移量对应的style
    getTransform(){
      return `translate3d(0,${this.startOffset}px,0)`;
    },
    //获取真实显示列表数据
    visibleData(){
      return this.listData.slice(this.start, Math.min(this.end,this.listData.length));
    }
  },
  mounted() {
    this.screenHeight = this.$el.clientHeight;
    this.start = 0;
    this.end = this.start + this.visibleCount;
  },
  data() {
    return {
      //可视区域高度
      screenHeight:0,
      //偏移量
      startOffset:0,
      //起始索引
      start:0,
      //结束索引
      end:null,
    };
  },
  methods: {
    scrollEvent() {
      //当前滚动位置
      let scrollTop = this.$refs.list.scrollTop;
      //此时的开始索引
      this.start = Math.floor(scrollTop / this.itemSize);
      //此时的结束索引
      this.end = this.start + this.visibleCount;
      //此时的偏移量
      this.startOffset = scrollTop - (scrollTop % this.itemSize);
    }
  }
};

 

标签:return,listData,列表,start,虚拟,scrollTop,itemSize
From: https://www.cnblogs.com/fly-s/p/18383767

相关文章

  • 安装虚拟机(VMware)教程
    VMware-虚拟机使用一、VMware介绍二、VMware下载三、VMware安装1.第一步,点击安装的*.exe文件,出现以下画面2.第二步,点击下一步,到选择安装的路径,默认安装和自定义安装3.第三步,点击安装,开始安装4.第四步、安装完成三、VMware使用1.打开VMware,先试用30天免费秘钥2.打......
  • Linux基础虚拟化实验
    常见虚拟化技术虚拟化主要厂商及产品介绍:系列PC/服务器版代表VMwareVMwareworkstation、vSphereMicrosoftVirtualPC、Hyper-VRedHatKVM、RHEVcitrixXenoracleOracleVMVIrtualBox       虚拟化与云计算的关系:虚拟化:一种技术,顾名......
  • 一起搭WPF之列表数据绑定
    一起搭WPF之列表数据绑定1前言2数据绑定2.1前端2.2后端实现2.2.1界面后台2.2.2模型与逻辑3问题3.2解决总结1前言之前已经简单介绍了列表的大致设计,在设计完列表界面后,我们可以开展列表的数据绑定,在前端显示我们的数据,对列表进行数据输入。那么让我们开......
  • vue2的el-select虚拟下拉
    说明vue3的的el-select,ElementPlus封装了虚拟下拉的写法,但是有些vue2版本的el-select却没办法用虚拟下拉。如果下拉列表数据量大的话,很导致极度卡顿。那我们就自己封装一个吧代码components下新建elselectV2文件夹,新建两个文件:elOptionNode.vue和VirtualSelect.vue。el......
  • JVM(Java Virtual Machine,Java虚拟机)
    JVM(JavaVirtualMachine,Java虚拟机)是Java平台的核心组成部分,它负责运行Java程序。JVM使得Java程序能够“一次编写,到处运行”(WriteOnce,RunAnywhere),这是Java语言的一个重要特性。JVM通过在不同的操作系统上提供统一的运行时环境来实现这一特性。JVM的主要组成部分JVM主......
  • 主机windows系统,虚拟机安装ubuntu无线网络连接配置
    主机系统:windows系统虚拟机版本:VMware10.0.1build-1379776ubuntu系统版本:ubuntu16.04LTSlinux系统配置:按照顺序点击下图中的1位置,会出现一个下拉列表然后点击下拉列表中2的位置,编辑连接然后出现下图中所示界面选中3所示位置,然后点击4“编辑”依次配置如下箭头所......
  • Python数据结构实战:列表、字典与集合的高效使用
    在日常的编程工作中,选择合适的数据结构对于提高程序效率至关重要。Python提供了丰富的内置数据结构,其中最常用的就是列表(List)、字典(Dictionary)和集合(Set)。本文将深入探讨这些数据结构,并介绍它们的内部实现以及如何高效地使用它们。1.列表(List)1.1定义与创建列表是......
  • C++类和对象(下):初始化列表、explicit关键字、友元函数、友元类
    文章目录C++类和对象9、初始化列表9.1构造函数体赋值9.2初始化列表9.3explicit(显示)关键字10、友元10.1友元函数10.2友元类C++类和对象9、初始化列表一个类的构造函数要初始化成员变量有两种方式,一种是构造函数体赋值,另一种是初始化列表。9.1构造函数体赋值......
  • 重塑列表美学:CSS `list-style` 属性的魔法
    重塑列表美学:CSSlist-style属性的魔法摘要CSS的list-style属性是控制列表项标记样式的强大工具。通过这个属性,开发者可以轻松改变无序列表和有序列表的外观,包括标记的类型、位置以及图像。本文将深入探讨list-style属性的各个方面,并提供丰富的代码示例,展示如何使用......
  • 虚拟机创建及安装docker(详细过程)
    一、虚拟机的创建1.创建虚拟机(1).第一步(2).第二步(3).第三步(4).第四步(5).第五步注:安装路径不要有中文,不要有空格(6).第六步注意:可能会出现以下错误 (处理器内核总数=处理器数量✖每个处理器的内核数量) 当虚拟机设置的虚拟处理器(vCPU)数量多于物理主机......