实现原因
今天帮别人解决需求,又不能用插件,又要实现上拉加载,还要快
......
实现代码
<template>
<div class="box">
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
<div ref="loading"></div>
</ul>
</div>
</template>
<script>
export default {
name: "04cli3App",
data() {
return {
// 数据初始化
list: [],
};
},
created() {
// 获取数据
this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
},
mounted() {
// 初始化滚动
this.scroll()
},
methods: {
scroll() {
const loading = this.$refs.loading
var observer = new IntersectionObserver(arr => {
if (arr[0].isIntersecting) {
// 下拉至底部,加载更多数据
this.list.push(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
// 不再监听 只监听一次
// observer.unobserve(loading) // 可以根据需求取消监听,比如列表数据加载完成后,取消监听
}
// rootMargin 提前 100px 来发请求获取数据,因为发请求也是需要时间的
}, { rootMargin: '100px' })
// 调用函数,开始监听
observer.observe(loading)
},
},
};
</script>
<style lang="css" scoped>
/* 样式布局 */
.box {
width: 300px;
height: 300px;
}
li {
margin: 100px 0;
}
</style>
原理:
就是在数据列表(最后一个li标签)的最下方放个盒子,监听它是否在视口之内,如果在,那就进行获取下一页数据