当前位置: 首页 > news >正文

前端高性能渲染 — 虚拟列表

虚拟列表,实际上就是在首屏加载的时候,只加载可视区域内需要的列表项,当滚动发生时,动态通过计算获得可视区域内的列表项,并将非可视区域内存在的列表项删除。该技术是解决渲染大量数据的一种解决方法。
实现虚拟列表,需要获取以下几个属性

  1. 可视区域起始数据索引(startIndex)
  2. 可视区域结束数据索引(endIndex)
  3. 计算可视区域数据,并渲染到页面中
  4. 计算startIndex对应的数据在整个列表中的偏移位置listTop并设置到列表上

高度固定

令App组件(父组件)产生一万条虚拟数据来模拟接口,在List组件中实现对应的功能

App组件:

<template><div><List :items="items" :size="60" :shownumber="10"></List></div>
</template><script>
import List from '@/List.vue'
export default {components: {List},computed: {// 模拟数据items() {return Array(10000).fill('').map((item, index) => ({id: index,content: index}))}}
};
</script><style scoped></style>

List组件:

<template><div class="container" :style="{ height: containerHeight }" @scroll="handleScroll" ref="container"><!-- 数据列表 --><div class="list" :style="{top:listTop}"><!-- 列表项 --><div v-for="item in showData" :key="item.id" :style="{height:size+'px'}">{{ item.content }}</div><!-- 用于撑开高度的元素 --><div class="bar" :style="{height:barHeight}"></div></div></div>
</template><script>
export default {name: 'List',props:{// 要渲染的数据items:{type:Array,required:true},// 每条数据渲染节点的高度size:{type:Number,required:true},// 每次渲染DOM节点个数shownumber:{type:Number,required:true}},data(){return{start:0,  //要展示数据的其实下标end:this.shownumber  //结束下标}},computed:{// 最终展示数据showData(){return this.items.slice(this.start,this.end)},// 容器的高度containerHeight(){return this.size * this.shownumber + 'px'},// 撑开容器内部高度的元素的高度barHeight(){return this.size * this.items.length + 'px'},// 列表项上滚动改变top的值listTop(){return this.start * this.size + 'px'},},methods:{// 容器滚动事件handleScroll(){// 获取容器顶部滚动的尺寸const scrollTop = this.$refs.container.scrollTopthis.start = Math.floor(scrollTop / this.size)this.end = this.start + this.shownumber}}
};
</script><style scoped>
.container{overflow-y: scroll;background-color: rgb(150,150,150,.5);font-size: 20px;font-weight: bold;line-height: 60px;width: 500px;margin: 0 auto;position: relative;text-align: center;
}
.list{position: absolute;top: 0;width: 100%;
}
</style>

这样可以实现一个简单的固定高度的虚拟列表功能。

相关文章:

前端高性能渲染 — 虚拟列表

虚拟列表&#xff0c;实际上就是在首屏加载的时候&#xff0c;只加载可视区域内需要的列表项&#xff0c;当滚动发生时&#xff0c;动态通过计算获得可视区域内的列表项&#xff0c;并将非可视区域内存在的列表项删除。该技术是解决渲染大量数据的一种解决方法。 实现虚拟列表&…...

防水出色的骨传导耳机,更适合户外运动,南卡Runner Pro 4S体验

已经接近尾声的夏季依然酷热&#xff0c;对于运动爱好者来说&#xff0c;这确实也是锻炼的好时机&#xff0c;无论是一会儿就能大汗淋漓的HIIT&#xff0c;还是是各种清凉的水上运动&#xff0c;在健身的同时&#xff0c;戴上一副耳机享受音乐&#xff0c;都会更加痛快一些。 相…...

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …...

1584 - Circular Sequence (UVA)

题目链接如下&#xff1a; Online Judge 我的代码如下&#xff1a; #include <cstdio> #include <string.h> const int maxN 101;int T, len, pivot; char a[maxN];int main(){scanf("%d", &T);for(int i 0; i < T; i){scanf("%s"…...

Revit SDK:Selections 选择

前言 Revit 作为一款成熟的商业软件&#xff0c;它将自己的UI选择功能也通过 API 暴露出来。通过 API 可以按照特定的过滤规则来选择相应的元素&#xff0c;能力和UI基本上是等价的。这个 SDK 用四个例子展示了 API 的能力&#xff0c;内容如下。 内容 PickforDeletion 核心…...

K8s中的RBAC(Role-Based Access Control)

摘要 RBAC&#xff08;基于角色的访问控制&#xff09;是一种在Kubernetes中用于控制用户对资源的访问权限的机制。以下是RBAC的设计实现说明&#xff1a; 角色&#xff08;Role&#xff09;和角色绑定&#xff08;RoleBinding&#xff09;&#xff1a;角色定义了一组权限&am…...

肖sir__设计测试用例方法之经验测试方法09_(黑盒测试)

设计测试用例方法之经验测试方法 一、经验的测试技术 &#xff08;1&#xff09;基于经验的测试技术之错误推测法 错误推测法也叫错误猜测法&#xff0c;就是根据经验猜想&#xff0c;已有的缺陷&#xff0c;测试经验和失败数据等可能有什么问题并依此设计测试用例 &#xff0…...

Python爬虫:下载小红书无水印图片、视频

该代码只提供学习使用&#xff0c;该项目是基于https://github.com/JoeanAmier/XHS_Downloader的小改动 1.下载项目 git clone https://github.com/zhouayi/XHS_Downloader.git2.找到需要下载的文章的ID 写入main.py中 3.下载 python main.py最近很火的莲花楼为例<嘿嘿…...

【小沐学Unity3d】3ds Max 多维子材质编辑(Multi/Sub-object)

文章目录 1、简介2、精简材质编辑器2.1 先创建多维子材质&#xff0c;后指定它2.2 先指定标准材质&#xff0c;后自动创建多维子材质 3、Slate材质编辑器3.1 编辑器简介3.2 编辑器使用 结语 1、简介 多维子材质&#xff08;Multi/Sub-object&#xff09;是为一个模形&#xff0…...

# Go学习-Day8

文章目录 Go学习-Day8单元测试Goroutine进程和线程并发和并行Go协程和主线程MPG模式CPU相关协程并行的资源竞争 Go学习-Day8 个人博客&#xff1a;CSDN博客 单元测试 testing框架会将xxx_test.go的文件引入&#xff0c;调用所有TestXxx的函数 在cal_test.go文件里面写这个 …...

Maven编译java及解决程序包org.apache.logging.log4j不存在问题

1、首先新建一个文件夹&#xff0c;比如hello Hello里新建pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…...

【小吉测评】高效简洁的数据库管控平台—CloudQuery

文章目录 &#x1f384;CloudQuery是什么&#x1f6f8;CloudQuery支持的数据源类型&#x1f354;CloudQuery社区地址&#x1f33a;如何使用&#x1f6f8;参考官方文档&#x1f6f8;参考视频教程&#x1f388;点击免费下载&#x1f388;立即下载即可&#x1f388;使用服务器完成…...

获取微信小程序二维码的bug

项目场景&#xff1a; 获取微信小程序二维码的bug,原来测试一直是没问题的&#xff0c;上线后也没啥问题&#xff0c;这次突然爆错 问题描述 access_token已失效或已过期 {"errcode":40001,"errmsg":"invalid credential, access_token is invalid…...

Linux之Shell(一)

Linux之Shell Shell概述Linux提供的Shell解析器bash和sh的关系Centos默认的解析器是bash Shell脚本入门脚本格式第一个脚本脚本常用的执行方式 变量系统预定义变量自定义变量特殊变量$n$#\$*、\$$? 运算符条件判断流程控制(▲)if判断case语句for循环while循环 read读取控制台输…...

解决拦截器抛出异常处理类的500状态码Html默认格式响应 !

解决方式 <mvc:annotation-driven><mvc:message-converters><!-- 配置JSON消息转换器 --><bean class"org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><property name"supportedMediaTypes"&…...

搭建PyTorch神经网络进行气温预测

import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline features pd.read_csv(temps.csv)#看看数据长什么样子 features.he…...

Qt Creato配置PCL库

Qt Creator中使用PCL库_业务不精er的博客-CSDN博客 Qt6.1.0中配置pcl1.11.1_qt6导入pcl库_朽一的博客-CSDN博客 VS2017 中配置QTPCL显示点云或3D图形_pcl显示3d图tiff_桂林巡山的博客-CSDN博客 Windows10下QTVTKPCL环境配置&#xff08;一次成功&#xff09;_qt pcl_v俊逸的…...

从阿里到字节跳动,这3年外包做完,我这人生算是彻底废了......

​我为什么一直做外包呢&#xff0c;原因是薪资和技术方面。 在阿里做了一年外包&#xff0c;薪资5k&#xff0c;功能测试&#xff0c;接触Linux和网络&#xff0c;但是说实在的技术很难沉淀&#xff0c;就像雾里看花一样&#xff0c;过年之后&#xff0c;想走的人都走了&…...

在汽车行业中如何脱颖而出?使用聊天机器人是关键

汽车行业正在经历一场非凡的技术革命&#xff0c;尖端技术重塑了其本质。汽车中的聊天机器人能作为一种改变游戏规则的技术脱颖而出&#xff0c;推动企业与客户互动甚至吸引新客户的方式的进步。例如SaleSmartly&#xff08;SS客服&#xff09;就是一个很优秀的聊天机器人平台。…...

Go语言最全面试题,拿offer全靠它,附带免积分下载pdf

面试题文档下链接点击这里免积分下载 go语言入门到精通点击这里免积分下载 文章目录 Go 基础类GO 语言当中 NEW 和 MAKE 有什么区别吗&#xff1f;PRINTF(),SPRINTF(),FPRINTF() 都是格式化输出&#xff0c;有什么不同&#xff1f;GO 语言当中数组和切片的区别是什么&#xf…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...