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

虚拟滚动列表组件ReVirtualList

虚拟滚动列表组件ReVirtualList

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略)

ReList 的基础上,增加虚拟列表功能,在固定高度的基础上,可以优化大数据列表展示

思路

滚动容器默认使用List列表的父节点,需要配置 height 设置List的高度用于展示滚动条。

如果滚动容器不想使用List的父节点,可以通过 scrollTarget 指定,但是 height 需要设置为 auto,避免List内置滚动。

通过自己封装的虚拟滚动计算hook,通过监听滚动容器的滚动行为,根据当前展示视图的滚动距离计算展示内容在列表数据中的数据索引,从而获得展示视图对于数据的索引范围,以及前置内容高度,后置内容高度,最后将前置内容高度,后置内容高度以padding的方式设置,保证滚动容器的高度始终一致。

为了优化滚动交互,增加前置预加载数量和后置预加载数量,最终得到的渲染数据的数据索引。

对于卡片布局,可能存在网格布局(多列),还需要在虚拟滚动计算时,加入网格列数参数进行计算,得到最终的一个渲染数据索引范围。

难点

  • 考虑网格布局时加入列数进行虚拟滚动计算

基础

通过 items 绑定全量数据,自动进行虚拟滚动计算渲染。虚拟滚动需要指定列表项固定高度,使用前可以通过实际渲染高度或UI设计稿高度定义,默认列表项会直接使用固定高度渲染,内容超出会被隐藏。

在这里插入图片描述

查看 /demo/list/virtual.md

卡片列表

支持网格卡片列表的虚拟滚动展示,会自动根据网格数量进行虚拟滚动计算,得到能够占满当前滚动视图的网格数量。

在这里插入图片描述

查看 /demo/list/virtual-card.md

ReVirtualList属性

字段说明类型默认值
items必填,列表项数据集Record<string, any>[]-
metas必填,列表项展示配置ReListItemMetas-
title列表标题string-
height列表高度,不包括页头和页脚,默认按像素值处理string | number400
skeleton是否显示骨架屏booleantrue
rowHeight列表项高度,建议根据实际渲染指定number-
type列表类型“card” | “list”“list”
grid响应网格,仅在type="card"下有效number | ReGridResponsive1
gutter网格间距,仅在type="card"下有效number | [number] | [number, number]16

除了上述属性,支持ReList所有属性,默认会被ReList实例继承

同时ReVirtualList属性也继承了CustomVirtualScrollProps属性

CustomVirtualScrollProps

字段说明类型默认值
scrollTarget必填,滚动容器HTMLElement | (() => HTMLElement)-
pageSize页大小MaybeRef<number>20
rowHeight列表项高度number | ((index: number) => number)-
previewRows预加载数量,默认同pageSizeMaybeRef<number>-
cols多列参数,作为虚拟滚动计算参数,VirtualList会自动响应列表的网格数量,不需要手动配置MaybeRef<number>1
debounce滚动事件时延number300

ReVirtualList事件

事件名说明格式
update:checks已选中列表发生变化时触发(checks: Array<string | number>) => void
check点击某个复选框时触发(checked: boolean, id: string | number, item: Record<string, any>) => void

ReVirtualList插槽

插槽名说明
default列表项作用域插槽,带有 item、metas 两个作用域变量
titleList页头标题插槽
extraList页头额外信息插槽
footerPageList页脚插槽,在分页器之前

ReVirtualList Expose

字段说明类型
scrollTop当前滚动位置离容器顶部距离number
startPadding前置占位高度number
endPadding后置占位高度number
startIndex渲染数据开始索引number
endIndex渲染数据结束索引Ref<number>
scrollTo滚动到指定距离(scrollTop: number) => void
scrollToIndex滚动到指定索引位置(index: number) => void

源代码

Github

可以通过查看具体实现,如果遇到问题可以留言或者提出issue。

hook

虚拟滚动的实现单独抽离了一个hook,自行查看 hook/useVirtualScroll 方法,可以利用这个hook实现自己的虚拟滚动行为。目前还是基于固定高度进行计算,提供了一个rowHeight支持配置函数动态获取高度,如果您需要动态高度可以试着通过这个配置项实现

如果觉得对您有帮助的话,可以请小编瑞一下

在这里插入图片描述

在这里插入图片描述

相关文章:

虚拟滚动列表组件ReVirtualList

虚拟滚动列表组件ReVirtualList 组件实现基于 Vue3 Element Plus Typescript&#xff0c;同时引用 vueUse lodash-es tailwindCss (不影响功能&#xff0c;可忽略) 在 ReList 的基础上&#xff0c;增加虚拟列表功能&#xff0c;在固定高度的基础上&#xff0c;可以优化大数…...

稳定、耐用、美观 一探究竟六角头螺钉螺栓如何选择

在机器与技术未被发现的过去&#xff0c;紧固件设计和品质并不稳定。但是&#xff0c;他们已成为当今许多行业无处不在的构成部分。六角头标准件或六角头标准件是紧固件中持续的头部设计之一&#xff0c;它有六个面&#xff0c;对广泛工业应用大有益处。六角头标准件或常分成六…...

数据库Mybatis基础操作

目录 基础操作 删除 预编译SQL 增、改、查 自动封装 基础操作 环境准备 删除 根据主键动态删除数据&#xff1a;使用了mybatis中的参数占位符#{ }&#xff0c;里面是传进去的参数。 单元测试&#xff1a; 另外&#xff0c;这个方法是有返回值的&#xff0c;返回这次操作…...

人物形象设计:塑造独特角色的指南

引言 人物形象设计是一种创意过程&#xff0c;它利用强大的设计工具&#xff0c;通过视觉和叙述元素塑造角色的外在特征和内在性格。这种设计不仅赋予角色以生命&#xff0c;还帮助观众或读者在心理层面上与角色建立联系。人物形象设计的重要性在于它能够增强故事的吸引力和说…...

网络安全-安全策略初认识

文章目录 前言理论介绍1. 安全策略1.1 定义&#xff1a;1.2 关键术语&#xff1a; 2. 防火墙状态监测 实战步骤1&#xff1a;实验环境搭建步骤2&#xff1a;配置实现 总结1. 默认安全策略2. 自定义安全策略3. 防火墙状态会话表 前言 who&#xff1a;本文主要写给入门防火墙的技…...

python import相对导入与绝对导入

文章目录 相对导入与绝对导入绝对导入相对导入何时使用相对导入何时使用绝对导入示例 相对导入与绝对导入 在Python中&#xff0c;from .file_manager import SomeFunction 和 from file_manager import SomeFunction 两种导入方式看似相似&#xff0c;但在模块寻找机制上存在…...

深入理解 Go 语言原子内存操作

原子内存操作提供了实现其他同步原语所需的低级基础。一般来说,你可以用互斥体和通道替换并发算法的所有原子操作。然而,它们是有趣且有时令人困惑的结构,应该深入了解它们是如何工作的。如果你能够谨慎地使用它们,那么它们完全可以成为代码优化的好工具,而不会增加复杂性…...

PostgreSQL几个扩展可以帮助实现数据的分词和快速查询

在 PostgreSQL 数据库中,有几个扩展可以帮助实现数据的分词和快速查询,特别是在处理全文搜索和文本分析时。以下是几个常用的扩展: 1. pg_trgm pg_trgm(Trigram)扩展是 PostgreSQL 中的一个强大的工具,它可以通过计算字符串之间的相似度来实现快速文本搜索。它支持基于…...

C盘满了怎么办?教你清理C盘的20个大招,值得收藏备用

C盘满了怎么办&#xff1f;教你清理C盘的20个大招&#xff0c;值得收藏备用 今天给大家介绍20种C盘清理的方法&#xff0c;下次遇到C盘满了红了就知道怎么做了&#xff0c;喜欢请点赞收藏关注点评。 清理更新缓存 清理微信缓存 查找大文件清理或者迁移 磁盘缓存清理 系统还…...

原生js实现下滑到当前模块进度条填充

<div style"height: 1500px;"></div> <div class"progress-container"><div class"progress-bar" data-progress"90%"><p class"progress-text">Google Ads在Google搜索引擎上覆盖超过90%的互…...

显示弹出式窗口的方法

文章目录 1. 概念介绍2. 使用方法3. 示例代码 我们在上一章回中介绍了Sliver综合示例相关的内容&#xff0c;本章回中将介绍PopupMenuButton组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧&#xf…...

Java-什么是缓存线程池?

什么是缓存线程池? 缓存线程池 (CachedThreadPool) 是一种特殊的线程池,它能够动态地调整线程的数量,以适应任 务的需求。这种线程池非常适合处理大量短暂的任务,因为它会根据任务的数量自动增加或减少线 程的数量。 缓存线程池的特点: 线程数量动态调整:缓存线程池…...

esbuild中的Binary Loader:处理二进制文件

在前端或Node.js项目中&#xff0c;有时需要处理二进制文件&#xff0c;如图片、音频、视频或其他非文本资源。esbuild提供了一款名为Binary Loader的插件&#xff0c;它能够在构建时将二进制文件加载为二进制缓冲区&#xff0c;并使用Base64编码将其嵌入到打包文件中。在运行时…...

深度好文:从《黑神话:悟空》看未来游戏趋势:高互动性、个性化与全球化

引言 在数字时代的浪潮中&#xff0c;游戏产业以其独特的魅力和无限的可能性&#xff0c;成为了全球娱乐文化的重要组成部分。随着科技的飞速发展&#xff0c;特别是高性能计算和人工智能技术的突破&#xff0c;游戏的世界变得越来越真实、细腻且富有深度。而在这股技术洪流中…...

【中项第三版】系统集成项目管理工程师 | 第 12 章 执行过程组

前言 本章属于10大管理的内容&#xff0c;上午题预计会考8-10分&#xff0c;下午案例分析也会进行考查。学习要以教材为主。 目录 12.1 指导与管理项目工作 12.1.1 主要输入 12.1.2 主要输出 12.2 管理项目知识 12.2.1 主要输入 12.2.2 主要输出 12.3 管理质量 12.3.…...

C语言自动生成宏定义枚举类型和字符串

#include <stdio.h>// 定义错误枚举 #define ERROR_LIST(e) \e(SUCCESS) \e(FAILURE) \e(NOT_FOUND) \e(TIMEOUT)// 使用宏生成枚举 #define GENERATE_ENUM(ENUM) ENUM, typedef enum {ERROR_LIST(GENERATE_ENUM) } ErrorCode;// 使用宏生成字符串数组…...

C#单例模式

&#xfeff;using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace _3._3._6_单例模式 {public class Singleton{private static Singleton s_instance;private int _state;private Singleton(int …...

10-使用sentinel流控

本文介绍sentinel的直接流控的使用。 0、环境 jdk 1.8sentinel 1.8.2springboot 2.4.2 1、sentinel环境搭建 从官方发布的网站上下载: sentinel Jar&#xff0c;下载对应版本。 下载完成后&#xff0c;进入刚才下载的Jar文件所在的目录&#xff0c;执行如下命令&#xff1a…...

redis AOF机制

在redis运行期间&#xff0c;不断将redis执行的写命令写到文件中&#xff0c;redis重启之后&#xff0c;只要将这些命令重复执行一遍就可以恢复数据。因为AOF只是将少量的写命令写入AOF文件中&#xff0c;因此其执行效率高于RDB&#xff0c;开启AOF即使Redis发生故障&#xff0…...

Day 21代码|随想录| 二叉树完结撒花,今日刷题669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.吧二叉搜索树转换为累加树

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 二叉树 Part06二、题目题目一&#xff1a;669.修剪二叉搜索树解题思路&#xff1a;递归法迭代法&#xff1a; 题目二&#xff1a; 108.将有序数组转换为二叉搜索树解题思路递归法&#xff1a;迭代…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...