Javascript 如何在Vue js中动态呈现无限滚动列表（仅可见）

我有一个非常大的对象数组，其中有很多数据要由组件中的Vue渲染到DOM，我想最好的方法是只渲染将可见的HTML，例如，如果每个组件的100px高度和组件容器的1000px高度一次只渲染10个组件；直到用户向下或向上滚动，并以某种FIFO方式（先进先出）渲染和“取消渲染”尊重元素

所以我想知道的是：哪种方法最好？可以通过使用一个10个对象的数组来解决，并将100px添加到容器的高度（将容器的底部和顶部额外放置50px），因此当用户在该额外空间中滚动时，执行fifo操作，另一种解决方案是，如果每个组件都可见，则为其提供计算能力（借助于窗口对象的一点帮助），然后进行自身渲染（使用v-show指令）。我不知道

（好的，这个问题指的是列表的动态呈现，而不是组件的动态加载，也不是动态组件）

任何想法、方法、标准或技术都将非常有用

var-app=新的Vue({
el:“#应用程序”，
数据：{
用户：数组（1000）。填充({
性别：“男性”，
姓名：{
标题：“先生”，
第一个：“文森特”，
最后一句：“欧莱特”
},
地点：{
街道：“争议路6963号”，
城市：“布罗克顿”，
国家：“育空”，
邮政编码：“Z4J 0J2”，
坐标：{
纬度：“-60.8550”，
经度：“-36.0196”
},
时区：{
偏移量：“+3:30”，
描述：“德黑兰”
}
},
电子邮件：“文森特。ouellet@example.com",
登录：{
uuid：“eb9b61f7-fb0b-4731-9a1c-f4b2a7b3b6a9”，
用户名：“Big949”，
密码：“nyjets”，
盐：“0TdUElhf”，
md5:“0fbc0edb70fda545f8838634f11f4be2”，
sha1：“f83e02d917721a1516b74937841b9c7f75a75d1e”，
sha256：“69E2C04BD4CCB43815B529A7182E1E59B9F78032B8197AF54B9B6D3F907B8A3”
},
出生日期：{
日期：“1959-08-27T20:26:03Z”，
年龄:59
},
注册：{
日期：“2013-10-20T04:51:58Z”，
年龄:4
},
电话：“647-173-6604”，
单元格：“544-306-1457”，
身份证：{
姓名：“，
值：null
},
图片：{
大号：“https://randomuser.me/api/portraits/men/13.jpg",
中：“https://randomuser.me/api/portraits/med/men/13.jpg",
缩略图：“https://randomuser.me/api/portraits/thumb/men/13.jpg"
},
纳特：“CA”
}
)
}
})

{{user}}

在您创建的方法上，您可以添加一个eventlistener来查找文档的结尾

一旦得到响应，就可以推送到用于迭代的数组。 但是，当您在手机中使用时，您需要收听触摸事件，而不是滚动

---

或者，我发现这个插件很容易实现，它可以处理移动和桌面事件。

请在代码段中提供您当前的代码。@DiegoMeza有时一个虚拟数据可以帮助我们测试代码……我会选择您所说的延迟加载卷轴（当您滚动到接近底部时加载项目），当用户在视口中有ref时，可以添加ref并侦听。关于加载新数据，我会在v-for中使用一个计算列表，通过临时索引用户在数组中的位置触发该列表（列表中加载的项目数增加x）@DiegoMeza抱歉，我不明白你写了什么。你能更清楚地编辑评论吗？：）很多例子：

window.onscroll = () => {
    let bottomOfWindow =
      document.documentElement.scrollTop + window.innerHeight ===
      document.documentElement.offsetHeight;

    if (bottomOfWindow) {
      axios.get(`https://randomuser.me/api/`).then(response => {
        this.persons.push(response.data.results[0]);
      });
    }
  };