目录
一、前言
当今的时代是大数据时代，往往一个列表就有成千上万条数据，而我们一一渲染的话，则需要耗费大量时间，导致网页打开缓慢。懒加载虽然减少了第一次渲染时间，加快了网页打开速度，但随着后续数据的不断载入拼接，列表的渲染时间也会越来越长。虚拟列表则很好的解决了这一问题。
虚拟列表只渲染当前可视区域的列表，并不会将所有的数据渲染。以下以一个自制记账本(account book)为例。
二、代码实现
0.准备
准备尽可能多的数据，比对使用虚拟列表前后渲染速率更加直观。
//总数据 不需要响应式
const accountData = []
const getData = ()=>{
//两万条数据 测试直接渲染卡顿大概1s左右
for(let i = 0; i < 10000; i++) {
accountData.push(
{
date: `2023-03-28`,
state: 0,
detail:`2月份工资`,
money: 1800
},
{
date: `2023-03-29`,
state: 1,
detail:'抽烟 喝酒 烫头',
money: 2000
})
}
}需要准备内外两个列表容器，外部容器(account-list-outer)固定高度用于生成滚动条，内部容器(account-list-inner)用于撑开外部容器使得滚动条保持与未使用虚拟列表时一致。
<template>
<!-- 固定高度用于生成滚动条 -->
<div class="account-list-outer" ref="outContainer">
<!-- 用于撑开外部容器使得滚动条保持与未使用虚拟列表时一致 -->
<div class="account-list-inner">
<!-- 循环展示 -->
<div class="account-box" v-for="(item,index) in viewData" :key="index">
...
</div>
</div>
</div>
</template>
<script lang='ts' setup>
//外部容器dom元素
const outContainer = ref()
//内部容器padding-top
const paddingTop = ref('0px')
//内部容器padding-bottom
const paddingBottom = ref('0px')
//最终展示数据
const viewData = reactive([])
</script>
<style scoped lang='scss'>
.account-list-outer{
height: calc(100vh - 58px); //根据自身需求设定高度
overflow-y: scroll;
.account-list-inner{
padding-top: v-bind('paddingTop');
padding-bottom: v-bind('paddingBottom');
}
}
</style>1.计算
在准备过程中已经获取了外部容器dom元素outContainer，定义好单行高度、外部容器高度以及滚动轴滚动长度。
//单行高度
const itemHeight = 70
//外部容器高度
const outContainerHeight = outContainer.value.cilentHeight
//滚动轴滚动长度
const scrollTop = outContainer.value.scrollTop通过这三个值可以计算出当前视口的起止下标。
const startIndex = Math.floor(scrollTop / itemHeight)
const endIndex = startIndex + Math.ceil(outContainerHeight / itemHeight)最终得出所需的外部容器padding以及当前可视的信息数据
paddingTop.value = (startIndex * itemHeight).toString() + 'px'
//accountData.length---总数据的长度
paddingBottom.value = ((accountData.length - endIndex) * itemHeight).toString() + 'px'
//清空viewData数据
viewData.splice(0, viewData.length)
//添加可视片段上的数据
viewData.push(...accountData.slice(startIndex, endIndex + 1))2.运行
//需要获取dom元素 所以要在onMounted钩子中进行
onMounted(async () => {
//获取原始数据(总数据)
getData()
//初始化创建虚拟列表
createVirtualList()
//添加事件监听
outContainer.value.addEventListener('scroll', createVirtualList)
})三、完整代码
<template>
<div id="main-bg">
<div class="title">记账本</div>
<div class="account-list-outer" ref="outContainer">
<div class="account-list-inner">
<div class="account-box" v-for="(item,index) in viewData" :key="index">
<p class="date" :style="{backgroundColor:item.state?'#f2ddde':'#dff1d8', color:item.state?'#ae8286':'#8ea189'}">{
{ item.date }}</p>
<div class="info">
<p class="detail">{
{ item.detail }}</p>
<p class="state"><span v-if="item.state">支出</span><span v-else>收入</span></p>
<p class="money">{
{item.money}}元</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
interface AccountDataItem{
date: string //日期
state: number //收支状态 0为收入 1为支出
detail:string //详情
money: number //花费或收入
}
//原始数据
const accountData: AccountDataItem[] = []
// 最终展示数据
const viewData: AccountDataItem[] = reactive([])
// 外部容器dom元素
const outContainer = ref()
// 内部容器padding-top
const paddingTop = ref('0px')
// 内部容器padding-bottom
const paddingBottom = ref('0px')
//单行高度 可少不可多
const itemHeight = 70
//外部容器高度
const outContainerHeight = outContainer.value.cilentHeight
//滚动轴滚动长度
const scrollTop = outContainer.value.scrollTop
//获取原始数据
const getData = ()=>{
//两万条数据 测试直接渲染卡顿大概1s左右
for(let i = 0; i < 10000; i++) {
accountData.push(
{
date: `2023-03-28`,
state: 0,
detail:`2月份工资`,
money: 1800
},
{
date: `2023-03-29`,
state: 1,
detail:'抽烟 喝酒 烫头',
money: 2000
})
}
}
//创建虚拟列表
const createVirtualList = () => {
const startIndex = Math.floor(scrollTop / itemHeight)
const endIndex = startIndex + Math.floor(outContainerHeight / itemHeight)
paddingTop.value = (startIndex * itemHeight).toString() + 'px'
// accountData.length---总数据的长度
paddingBottom.value = ((accountData.length - endIndex) * itemHeight).toString() + 'px'
// 清空viewData数据
viewData.splice(0, viewData.length)
// 添加可视片段上的数据
viewData.push(...accountData.slice(startIndex, endIndex + 1))
}
// 需要获取dom元素 所以要在onMounted钩子中进行
onMounted(async () => {
// 获取原始数据(总数据)
await getData()
// 初始化创建虚拟列表
createVirtualList()
// 添加事件监听
outContainer.value.addEventListener('scroll', createVirtualList)
})
</script>
<style scoped lang='scss'>
p{
margin: 0;
padding: 0;
}
#main-bg{
width: 60%;
margin: 0 auto;
padding: 20px 10px 0 10px;
}
.title{
width: 100%;
text-align: left;
font-size: 24px;
font-family: cursive;
font-weight: 800;
padding-bottom: 10px;
border-bottom: 1px #EEEEEE solid;
}
.account-list-outer{
height: calc(100vh - 58px);
overflow-y: scroll;
.account-list-inner{
padding-top: v-bind('paddingTop');
padding-bottom: v-bind('paddingBottom');
.account-box{
margin: 10px 0;
border: 1px #EEEEEE solid;
border-radius: 8px;
.date{
font-size: 14px;
line-height: 14px;
text-align: left;
padding: 10px;
}
.info{
font-size: 15px;
line-height: 15px;
text-align: left;
padding: 10px 15px;
display: flex;
.detail{
width: 60%;
}
.state{
width: 10%;
}
.monry{
width: 30%;
}
}
}
}
}
</style>
四、实现效果
