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

Question

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

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

Answer 1

过了一会儿我解决了这个问题这是我 sample project 为你阅读这个问题

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>

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

Lazy loading data from API in Vue.js

lazy-loading

asp.net-core-webapi

vuejs2