Vue2-虚拟滚动

分片加载

• 会导致页面dom元素过多，造成页面卡顿

let totalElement = 100000; // 元素
let index = 0; // 索引

const load = (size = 50) => {
   
  index++;
  let content;
  requestAnimationFrame(() => {
   
    for (let i = 0; i <= index * size; i++) {
   
      const element = document.createElement("div");
      element.innerHTML = i + (index - 1) * size;
      document.body.appendChild(element);
    }
    load();
  }, 0);
  if (index >= totalElement) return;
};
load();

虚拟滚动

• 只渲染当前可视区域

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-viewport" :style="{transform: `translateY(${offset}px)`}">
      <div class="scroll-item" v-for="item in visibleData" :key="item[keyValue] || item.index">
        <slot :item="item"></slot&