vue实现懒加载

滚动事件:@scroll="scroll" 

定义一个假数据: const data = Array.from({ length: 100 }, (_, i) => i + 1);

判断：如果 scrollTop + clientHeight >= scrollHeight，就意味着滚动条已经接近或到达容器的底部。

 引用 DOM 元素：const container = box.value;

开始显示10条：const mydata = ref(data.slice(0, 10));

<template>
  <!-- 大框 -->
  <div class="box" ref="box" @scroll="scroll">
    <div class="wrapper" v-for="(item, index) in mydata">
      我是内容{{ index + 1 }}
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
// 定义一个每次加载的条数
const loadNum = ref(10);
// 定义一个假数据
const data = Array.from({ length: 100 }, (_, i) => i + 1);
// 用于计数
let count = 1;
// 接取假数据前10条用于开始显示
const mydata = ref(data.slice(0, count * 10));
// 获取 box 盒子引用
const box = ref(null);
// 监听滚动事件
const scroll = async () => {
  // 获取盒子的高度
  const container = box.value;
  // 判断是否到底部
  const isAtBottom =
    container.scrollTop + container.clientHeight >= container.scrollHeight;
  if (isAtBottom) {
    count++;
    mydata.value = [...mydata.value, ...data.slice(count*10, (count+1)*10)];
  }
};
</script>

<style scoped>
.box {
  width: 320px;
  height: 350px;
  background-color: goldenrod;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
}

.wrapper {
  width: 300px;
  height: 50px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  margin-bottom: 10px;
}
</style>