vue-virtual-list-xg

virtual list component for Vue3

源码

live demo is here: https://gitee.com/derekgo/tool-collection/tree/master/virtualList/vue3

安装

npm i vue-virtual-list-xg --save

使用

main.ts

// script
import { createApp } from 'vue';
import App from './App.vue';
import virtualList from "vue-virtual-list-xg"
import "vue-virtual-list-xg/lib/style.css"

createApp(App).use(virtualList).mount('#app')

App.vue

<template>
  <div class="app-container">
    <virtualList :data="data" class="u-f u-f-spa u-f-aja" :columns="15" :containerHeight="virtualListHeight" >
      <template #default="row">
          {{row.data}}
      </template>
    </virtualList>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, ref} from "vue";

let once = ref(0)//每次插入的数量
let total = ref(0)//总条数
let countRender = ref(0)//已经渲染次数
let loopCount = ref(0)//需要插入的次数
let data = ref<any>([])
let virtualListHeight = ref("")


const handleInit = () => {
  data.value.length = 0;
  setTimeout(()=>{
    // 百万条数据
    total.value = 100;
    // 单次插入 可自定义
    once.value = 20;
    // 需要插入的次数 向上取整
    loopCount.value = Math.ceil(total.value / once.value);
    // 当前渲染次数
    countRender.value = 0;
    handleRender();
  },500)
}
//百万数据分段插入
const handleRender = () => {
  for (let i = 0; i < once.value; i++) {
    data.value.push({id:countRender.value+'-'+i})
  }
  // 渲染次数加1，控制递归的次数
  countRender.value++;
  let windowsObj = window as any
  if (countRender.value < loopCount.value) {
      windowsObj.requestAnimationFrame(handleRender);
  }
}
onMounted(()=>{
  virtualListHeight.value = (document.documentElement.offsetHeight-400)+"px"
  handleInit()
})
</script>

<style scoped lang="less">
.app-container{
  background-color: gray;
  height:500px;
  width: 500px;
}
.listItem{
  border-bottom:1px solid red;
  padding:10px;
}
</style>
<style lang="less">
/* flex布局 */
.u-f,
.u-f-ac {
  flex-shrink:0;//给flex布局添加固定宽度
display: flex!important;
}
.u-f-ac,
.u-f-ajc {
  align-items: center;
}
/* 水平方向居中 */
.u-f-ajc {
  justify-content: center;
}
.u-f-ajs {
  justify-content: space-between;
}
.u-f-aja {
  justify-content: space-around;

}
.u-f-spa{
  flex-direction: row;
  flex-wrap: wrap;
}
</style>