滚动事件:@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>
