Vue3 虚拟列表组件库 virtual-list-vue3 的使用

server/2024/11/20 6:41:57/

listvue3__0">Vue3 虚拟列表组件库 virtual-list-vue3 的基本使用

分享个人写的一个基于 Vue3 的虚拟列表组件库,欢迎各位来进行使用与给予一些更好的建议😊

概述:该组件组件库用于提供虚拟化列表能力的组件,用于解决展示大量数据渲染时首屏渲染缓慢和滚动卡顿问题

功能:该组件库主要包含 HFixedHeightVirtualListHFlexibleHeightVirtualList 两个组件

  • HFixedHeightVirtualList: - 定高虚拟列表组件,用于列表中每一项 item 的高度都是固定时
  • HFlexibleHeightVirtualList: - 不定高虚拟列表组件,用于列表中的每一项 item 都可能是不一样时

安装: npm i virtual-list-vue3

使用:🔺通过 item 具名插槽插槽,插入对应的 HTML 结构,该插槽也接收一个 { itemData } 属性(itemData 为该项 item 的数据

使用示例

定高虚拟列表示例: - HFixedHeightVirtualList

  • 在这里插入图片描述

  • <script setup lang="ts">javascript">
    import { HFixedHeightVirtualList } from 'virtual-list-vue3';const list = Array.from({ length: 1000 }, (_, i) => i + 1) // -- 1.模拟长列表数据(生产一个长度为1000的数组)
    </script><template><!-- 2.传入对应的 list 数据,与对应 item 的定高高度 --><HFxiedHeightVirtualList :list="list" :item-height="40"><!-- 3.通过 item 具名插槽传入对应的 item 的 HTML 结构,该插槽会返回该项的 itemData 数据  --><template #item="{ itemData }"><div class="item">{{ itemData }}</div></template></HFxiedHeightVirtualList>
    </template><style scoped>
    /* 4.基本样式,.item 的高度需要与上面传入的 item-height 配置的一样 */
    .item {height: 40px; /* 定高 */background-color: orange;color: white;line-height: 40px;text-align: center;margin-bottom: 8px;
    }
    </style>
    

不定高虚拟列表示例: - HFlexibleHeightVirtualList

  • 在这里插入图片描述

  • <script setup lang="ts">javascript">
    import { HFlexibleHeightVirtualList } from 'virtual-list-vue3';// -- 1.模拟长列表数据(生产一个长度为1000的,且值为不定数量的文字,为了模拟不定高的情况)
    const list = Array.from({ length: 1000 }, (_, i) => {let item = "小"if(i === 999) item = "END:"for(let i = 0; Math.floor(Math.random() * 200); i++) {item += "孔" // -- tip:注意这里不能使用英文来进行模拟,因为html的截断规则是根据单词来的,所以就会导致不会换行(了解)}return item
    }) </script><template><!-- 2. 传入对应的列表数据 --><HFlexibleHeightVirtualList :list="list"><!-- 3.通过 item 具名插槽传入对应的 item 的 HTML 结构,该插槽会返回该项的 itemData 数据  --><template #item="{ itemData }"><div class="item" >{{ itemData }}</div></template></HFlexibleHeightVirtualList>
    </template><style scoped>
    /* 4.基本样式: 不定高,根据内容适应高度 */
    .item {background-color: orange;color: white;margin-bottom: 8px;
    }
    </style>
    

Props

属性名说明类型默认值是否必传tip
list列表数据any[]-
width容器的宽度number` / `string“100%”当为 number 时以 px 为单位,当为 string 时,则会直接赋值到容器上
height容器的高度number / string“100vh”当为 number 时以 px 为单位,当为 string 时,则会直接赋值到容器上
bufferCount视区上、下额外展示的 DOM 节点数量(预加载)number6-
hiddenScrollbar是否隐藏滚动条booleanfalse-
reachBottomFn触底回调函数() => void / nullnull-
reachBottomFnDistance滚动到底部触发触底回调的触发距离(距离底部的距离)number50以 px 为单位
triggerBottomFnTime触发触底执行函数的节流时间number400以 ms 为单位

定高列表特有 Props

属性名说明类型默认值是否必传tip
itemHeight列表每一项 item 的高度number-以 px 为单位

不定高列表特有 Props

属性名说明类型默认值是否必传tip
initItemHeight列表 item 的预计高度number40预计高度,尽量要小点,可以多加载,但不能少,防止渲染不全(但也不能太过小,如 3、10…)

Props API

interface VitualListProps<T> {list: T[],bufferCount?: numberheight?: number | stringwidth?: number | stringhiddenScrollbar?: booleanreachBottomFn?: (...props: any[]) => any | nullreachBottomDistance?: numbertriggerBottomFnTime?: number
}interface FixedHeightProps<T> extends VitualListProps<T> {itemHeight: number
}interface FlexibleHeightProps<T> extends VitualListProps<T> { initItemHeight?: number
}

http://www.ppmy.cn/server/143407.html

相关文章

synchronized和volatile区别

synchronized和volatile都是Java中用于实现多线程同步的机制&#xff0c;但它们之间存在显著的差异。以下是对两者的详细比较&#xff1a; 一、作用机制 synchronized 锁机制&#xff1a;synchronized利用锁来保证同步。当某个线程进入由synchronized修饰的方法或代码块时&…

SwiftUI 高级开发教程 - 第一章:深入理解 SwiftUI 的声明式编程

一、声明式编程的核心概念与优劣势 1.1 什么是声明式编程? 声明式编程是一种以描述“是什么”为核心思想的编程范式。它与命令式编程的最大区别在于,开发者只需要告诉程序“我想要什么样的结果”,而不需要告诉它“如何一步步实现结果”。这一特性在构建复杂 UI 时尤其有用…

蓝桥杯某例题的解决方案和拓展(完全能解决例题本身)

蓝桥杯题目&#xff1a;求1&#xff08;包含&#xff09;直到20230408&#xff08;包含&#xff09;所有自然数的加和。 这个题比较恶心的一点在于&#xff0c;20230408本身没有超过int的上限&#xff0c;但是它的加和是超过int上限的&#xff0c;因此如果直接用int来计算&…

11.9.2024刷华为

文章目录 HJ31 单词倒排HJ32 密码提取语法知识记录 傻逼OD题目又不全又要收费&#xff0c;看毛线&#xff0c;莫名奇妙 HW这叼机构别搁这儿害人得不得&#xff1f; 我觉得我刷完原来的题目 过一遍华为机考的ED卷出处&#xff0c;就行了 HJ31 单词倒排 游戏本做过了好像 HJ3…

聚焦 AUTO TECH 2025华南展:探索新能源汽车发展新趋势

随着“新四化”浪潮的推进&#xff0c;汽车行业正经历前所未有的变革。中国新能源汽车正逐渐走向世界。国内汽车制造巨头如比亚迪、吉利、奇瑞、长安等&#xff0c;已经将出口提升至核心战略地位。中国新能源汽车的发展&#xff0c;不仅推动了全球汽车产业的电动化转型&#xf…

Iperf是什么?

Iperf 是一个网络性能测试工具。Iperf可以测试最大TCP和UDP带宽性能&#xff0c;具有多种参数和UDP特性&#xff0c;可以根据需要调整&#xff0c;可以报告带宽、延迟抖动和数据包丢失。 iperf 分为两种版本&#xff0c;unix/linux版和windows版&#xff0c;unix/linux版更新比…

C/C++ 知识点:extern 关键字

文章目录 一、extern 关键字1、什么是extern&#xff1f;2、基本用法2.1、声明全局变量2.2、声明函数2.3、使const变量具备外部连接性 3、extern "C"特殊用途3.1、C调用C3.2、C调用C 4、注意事项5、总结 前言&#xff1a; 在C和C编程语言中&#xff0c;extern关键字扮…

【计算机体系架构】 MESI缓冲一致性

高并发学习参考 https://blog.csdn.net/MrYushiwen/article/details/123049838 https://cloud.tencent.com/developer/article/2197857 ESI 是指Cache 行的三种一致性状态&#xff1a;E&#xff08;Exclusive&#xff0c;独占&#xff09;&#xff0c;S&#xff08;Shared&…