vue3 虚拟无缝滚动列表,可以展示大量列表 其他框架的请自行下载源码进行修改
npm install git+https://gitee.com/strivelei/virtual-list-scroll.git -S
或者
npm install virtual-seamless-scrolling -S
pnpm install virtual-seamless-scrolling -S
cnpm install virtual-seamless-scrolling -S
- 不定高无限滚动加载虚拟列表的实现，控制列表渲染数据量的同时实现列表无限滚动
| 参数/事件 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataKey | 从data-sources中的每个数据对象获取唯一键。或者使用每个数据源调用函数并返回其唯一键。其值在数据源中必须是唯一的，用于标识每一项的尺寸。 | String | id |
| dataSource | 传入的数组 | Array | 必传 |
| loading | 分页加载loading状态 | Boolean | 是否加载中 默认 false 只有为flase的时候才开始滚动 |
| estimatedHeight | 每一项的初始高度，用于传入渲染后再通过计算得到不定高列表的真实高度 | Number | 必传 |
| @scrollEnd | 列表滚动到底部触发的方法 | Function | - |
| @lineScrollEnd | 单行滚动完成触发的方法 | Function | - |
<template>
<template>
<h1>目前数据量{{dataSource.length}}</h1>
<div class="virtual-list-content">
<ListHeader :titleList="titleList"/>
<VirtualListScroll
data-key="project_id"
:data-source="dataSource"
:loading="loading"
:interval="3000"
@scroll-end="scrollEnd"
@line-scroll-end="lineScrollEnd"
class="virtual-list"
>
<template #item="{ item }">
<el-tooltip placement="top" color="rgba(73, 146, 255, 0.8)" :popper-options="{
modifiers: [
{
name: 'computeStyles',
options: {
adaptive: false,
enabled: false,
},
},
],
}">
<template #content>
<span>项目名：{{ item.name }}</span>
</template>
<div class="virtual-list-item" @click="handelClick(<DataItem>item)">
<span class="virtual-list-item-col">{{ item.name }}</span>
<span class="virtual-list-item-col">{{ item.influence }}</span>
<span class="virtual-list-item-col">{{ item.trend }}</span>
<span class="virtual-list-item-col">{{ item.response }}</span>
<span class="virtual-list-item-col">{{ item.activity }}</span>
<span class="virtual-list-item-col">{{ item.github }}</span>
</div>
</el-tooltip>
</template>
</VirtualListScroll>
</div>
</template>
</template>
<script setup lang="ts">
import {VirtualListScroll, ListHeader, TitltListItem} from 'virtual-seamless-scrolling'
import {ref} from "vue";
// 列表字段
const titleList: TitltListItem[] = [
{
label: '项目名',
width: '20%'
},
{
label: '影响力',
width: '16%'
},
{
label: '发展趋势',
width: '16%'
},
{
label: '社区反应',
width: '16%'
},
{
label: '开发活跃度',
width: '16%'
},
{
label: '指数',
width: '16%'
}
];
const loading = ref(true)
type DataItem = {
project_id: number;
influence: string;
response: string;
activity: string;
trend: string;
github: string;
name: string;
};
// 数据员
const dataSource = ref<DataItem[]>([])
// 模拟请求
setTimeout(() => {
for (let i = 0; i < 35; i++) {
dataSource.value.push({
"project_id": i,
"influence": (58.42 * (i /10) + ''),
"response": "31.40",
"activity": "79.34",
"trend": "68.78",
"github": "60.31",
"name": "Automattic/wp-calypso" + i
})
}
loading.value = false
}, 100)
/**
* 滚动完成
*/
const scrollEnd = () => {
// 滚动完成后复制一份数据
console.log('列表滚动到底部触发的方法')
}
/**
* 单行滚动完成
*/
const lineScrollEnd =() => {
console.log('单行滚动完成')
}
const handelClick = (item: DataItem) => {
console.log('点击事件', item)
}
</script>
<style scoped lang="scss">
.virtual-list-content {
display: flex;
flex-direction: column;
height: 500px;
padding: 0 8px;
background-color: #0a54ea;
.virtual-list-item {
display: flex;
gap: 8px;
align-items: center;
padding: 4px;
//height: 80px;
color: rgb(255 255 255);
cursor: pointer;
&:hover {
color: #68d8ff;
background: rgb(255 255 255 / 10%);
}
&-col {
width: 16%;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
&-col:nth-child(1) {
width: 19.5%;
text-align: left;
}
}
}
</style>