npm install vue3-base-virtual-list 参数 exportinterfaceProps{// 列表list:any[]// container 样式containerStyle?:style// container classcontainerClassName?:string// child 样式childStyle?:style// child classchildClassNam
Vue3生态中有许多优秀的第三方库可以帮助开发者快速实现虚拟列表,如vue-virtual-scroller等。这些库通常提供了丰富的配置选项和易用的API,可以大大简化虚拟列表的实现过程。 示例代码 以下是一个使用vue-virtual-scroller库实现Vue3虚拟列表的示例代码: vue <template> <div class="virtual-list"> &l...
<template> <VirtualList :listData="data" :itemSize="100" /> </template> import VirtualList from "./common.vue"; import { ref } from "vue"; const data = ref([]); for (let i = 0; i < 1000; i++) { data.value.push({ id: i, value: i }); } html { height: 10...
答案很简单,我们知道每个item的高度itemSize,并且知道有多少条数据listData.length。那么itemSize * listData.length不就是真实的列表高度了吗。所以我们可以在可视区域container中新建一个名为placeholder的空div,将他的高度设置为itemSize * listData.length,这样可视区域就被撑开了,并且滚动条也有了。代码如下: <temp...
答案很简单,我们知道每个item的高度itemSize,并且知道有多少条数据listData.length。那么itemSize * listData.length不就是真实的列表高度了吗。所以我们可以在可视区域container中新建一个名为placeholder的空div,将他的高度设置为itemSize * listData.length,这样可视区域就被撑开了,并且滚动条也有了。代码如下: ...
Virtual List Component Developed Based on Vue3+Typescript (基于vue3+ts开发的虚拟列表组件). Latest version: 0.0.1, last published: 2 years ago. Start using vue3-virtuall-list-component in your project by running `npm i vue3-virtuall-list-component`. There
//useVirtualList.tsimport { ref, onMounted, onBeforeUnmount, watch, nextTick } from"vue"; import type { Ref } from"vue"; interface Config { data: Ref<any[]>;//数据源scrollContainer: string;//滚动容器的元素选择器actualHeightContainer: string;//用于撑开高度的元素选择器translateContainer: str...
feat: a new vue-virtual-list Nov 17, 2022 tsconfig.json docx: 修改配置 Nov 20, 2022 tsconfig.vitest.json docx: 修改配置 Nov 20, 2022 vite.config.ts docx: 修改配置 Nov 20, 2022 yarn.lock chore: 修改项目结构,增加声明文件 Nov 18, 2022 ...
npm install vue3-base-virtual-list 参数 export interface Props { // 列表 list: any[] // container 样式 containerStyle?: style // container class containerClassName?: string // child 样式 childStyle?: style // child class childClassName?: string // 高度 height: number // 列表子项预估...
list数据Array-是 itemKey项的 id,必须唯一String Number-是 minSize最小尺寸,会根据这个尺寸来计算可视区域内个数Number20是 fixed是否为固定高度,可以提升性能 注意:动态高度模式下,请勿使用Numberfalse- buffer当渲染量大,滚动白屏严重时,可以给定数值,bufferTop 和 bufferBottom 会等于 bufferNumber0- ...