在 Vue.js 中从 API 延迟加载数据

Question

当用户向下滚动到 Bootstrap 模式的底部时，我想延迟加载内容，有点像无限滚动，使用 Vue.js。我正在从 API 调用的操作方法获取所有数据。来自此 API 的数据存储在挂载的对象数组中，并在应用程序中使用。

目前为止，一切都好。但是现在我想在初始状态下实现它，只从 API 获取前 10 个项目。当用户向下滚动到页面底部时，我想获取接下来的 10 个结果，依此类推。我已经查看了我正在使用的 API 的文档，它支持抵消我正在获取的项目。虽然我不确定从哪里开始。有谁知道关于这个主题的任何好资源？谢谢吨！

Answer 1

过了一会儿我解决了问题 这是我为您阅读此问题的示例项目

Answer 2

如果您试图避免使用 npm 包，这是我的解决方案。你可以在 vue 中的任何可滚动div 中使用它。在下面的 if 语句中，您将处理 api 调用以获取更多结果。

<template>
<div class="scroll" @scroll="scroll">
</div>
</template>
<script>
export default{
name: "Scroll",
data(){
return{
bottom: false
}
},
methods:{
scroll(e){
const {target} = e;
if (Math.ceil(target.scrollTop) >=
target.scrollHeight - target.offsetHeight) {
//this code will run when the user scrolls to the bottom of this div so 
//you could do an api call here to implement lazy loading
this.bottom = true;

}
}
}
</script>