Virtualized Table 虚拟化表格 javascript vue实现虚拟列表

转载

mob64ca1400133b 2023-10-27 10:59:32

文章标签 前端 vue javascript scss 数据 文章分类 虚拟化云计算

一、前言

二、代码实现

0.准备

1.计算

2.运行

三、完整代码

四、实现效果

一、前言

当今的时代是大数据时代，往往一个列表就有成千上万条数据，而我们一一渲染的话，则需要耗费大量时间，导致网页打开缓慢。懒加载虽然减少了第一次渲染时间，加快了网页打开速度，但随着后续数据的不断载入拼接，列表的渲染时间也会越来越长。虚拟列表则很好的解决了这一问题。

虚拟列表只渲染当前可视区域的列表，并不会将所有的数据渲染。以下以一个自制记账本(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>