<!-- 一名小白，有大佬的话请留情 -->
<template>
<div class="scroll-box" @scroll="scrollBox($event)">
<!-- 自己实现上拉加载 -->
<ul ref="scroll-box">
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
num: 1,
};
},
created() {
this.rember();
},
methods: {
rember() {
// console.log("123");
for (var i = 0; i < 100; i++) {
if (this.list.length <= 500) {
this.list.push(this.list.length + 1);
}
}
},
scrollBox(e) {
// console.log(e.target.scrollTop);
console.log(this.num);
// 找一个滚动到合适加载的位置(与数据多少有关)，并拿到值，做处理
// 如果滚动的位置为2100加载
// 并且到每次滚动的位置一定与2100有关
if (e.target.scrollTop >= 2100 * this.num) {
this.rember();
this.num += 1.2;
}
},
},
};
</script>
<style scoped lang = "less">
.scroll-box {
height: 100%;
overflow-y: auto;
}
</style>
来源：oschina
链接：https://my.oschina.net/u/4345184/blog/4458536