javascript - 为什么这个Vue 无限滚动加载Demo 中没有实现加载100条数据?

Question

demo

为什么这个无限滚动加载 中没有实现加载100条数据?

Answer 1

回答：它是实现了加载100条数据的，不过它是懒加载，只给你展示10个元素；当超出容器后它就开始替换元素，目前element-plus的这个懒加载组件是通过高度来限制元素展示区域的；你如果想实现每次懒加载100个，可能需要手动实现一下这个组件了，也不难实现；可以仿照它的效果，实现元素替换即可。

Answer 2

你再去好好看看有没有实现

Answer 3

解答

在这个Vue无限滚动加载Demo中，没有直接实现加载100条数据的原因在于代码中的加载逻辑是基于计数器（count）每次增加1来模拟的，而并未直接设置为一次性加载100条数据。

具体解释如下：

1. 初始化数据：const count = ref(0) 初始化了一个响应式变量count，并设置其值为0。
2. 加载逻辑：在load函数中，每次调用时都会将count.value的值增加1（count.value += 1）。这意味着每次滚动触发加载时，仅加载了一个额外的条目。
3. 未设定加载数量：代码中并没有设定一个条件来一次性加载100条数据。如果你想实现这个功能，你需要修改load函数中的逻辑，例如使用一个变量来追踪已经加载的数据数量，并在达到某个阈值（如99）时一次性加载剩余的条目，直到总数达到100。

示例修改

如果你想实现一次性加载100条数据，你可以修改load函数如下：

const load = () => {
  console.log("load 执行;", count.value)
  if (count.value < 100) { // 当已加载数据少于100条时
    count.value += 10; // 一次性增加10条数据（你可以根据需要调整这个数字）
  }
}

但请注意，这只是一个简单的示例，实际情况下你可能需要根据你的数据源和API来调整加载逻辑。