vue虚拟滚动

虚拟滚动

定义

通过改变视图层的位置查看固定个数的元素

vue3代码

<template>
  <h1>虚拟滚动</h1>
  <div class="scoll-box" ref="demo" :style="`height:${itemHeight * showNumber}px`">
    <div class="scoll-scoke" :style="`height:${data.length * itemHeight}px`">
      <div class="scoll-data" :style="`top:${positionTop}px`">
        <div class="scoll-item" v-for="(item) in activeList" :key="item">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, provide, ref } from "vue";
const createData = (len) => {
  return Object.keys(new Array(len).fill(","))
}
const demo = ref("")
const showNumber = 5;
const data = createData(1000);
const itemHeight = 100;
const positionTop = ref(0);
const startCount = ref(0);
const lastTime = ref(0)
const activeList = computed(() => {
  const start = startCount.value;
  return data.slice(start, start + showNumber)
})
const scrollFun = (event) => {
  if (new Date().getTime() - lastTime.value > 10) {
    let { scrollTop } = event.target;
    startCount.value = parseInt(scrollTop / itemHeight);
    positionTop.value = scrollTop;
    lastTime.value = new Date().getTime();
  }
}
provide('showNumber', showNumber)
onMounted(() => {
  lastTime.value = new Date().getTime();
  demo.value.addEventListener("scroll", scrollFun)
})
onUnmounted(() => {
  if (!demo.value) return;
  demo.value.removeEventListener("scroll", scrollFun);
  demo.value = null
})
</script>

<style>
.scoll-box {
  width: 100%;
  border: 1px solid;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  overflow: auto;
}

.scoll-data {
  position: absolute;
  width: 100%;
}

.scoll-item {
  widows: 100%;
  height: 100px;
  background: pink;
}

.scoll-item:hover {
  background: blue;
  color: #fff;
}
</style>