Vue无限滚动加载Demo仅加载10条数据，怎样加载100条

在Vue开发中，无限滚动加载是提升用户体验的常用功能。不少开发者在实践时会遇到这样的问题：按照常规的无限滚动加载Demo设置，往往只能加载10条数据，如何才能加载100条呢？这需要我们深入理解无限滚动加载的原理并对代码进行相应调整。

要明确无限滚动加载的核心机制。它通过监听滚动事件，当页面滚动到特定位置时，触发加载新数据的操作。在Vue中，一般会使用IntersectionObserver或传统的滚动事件监听来实现。对于仅加载10条数据的情况，很可能是数据获取逻辑和分页设置存在局限。

检查数据获取函数是关键一步。确认从后端请求数据的接口是否正确，以及请求参数是否合理。通常，后端数据接口可能需要分页参数，例如page和limit。如果默认设置limit为10，那就只能获取到10条数据。将limit参数修改为100，后端接口会返回100条数据。但这还不够，前端还需对接收和处理数据的逻辑进行调整。

在Vue组件中，数据存储和更新的逻辑至关重要。假设使用data属性存储获取到的数据，要确保新获取的100条数据能够正确追加到现有数据中。可以使用数组的concat方法或者push方法，根据实际情况选择合适的方式。例如：this.dataList = this.dataList.concat(newData)，其中newData是新获取的100条数据。

要注意滚动加载的触发条件。如果之前设置的触发条件过于宽松，可能导致多次加载少量数据。调整触发逻辑，确保在合适的滚动位置一次性加载100条数据。可以通过设置一个更合理的阈值，当滚动距离达到该阈值时，再发起获取100条数据的请求。

还要考虑加载状态的管理。在请求100条数据时，显示加载动画，防止用户重复操作；请求成功后，隐藏加载动画。这能让用户体验更加流畅和友好。通过上述步骤的调整和优化，就能在Vue无限滚动加载中成功加载100条数据，提升应用的数据展示能力和用户体验。