如何在 vuejs 中创建无限滚动部分？

如何解决如何在 vuejs 中创建无限滚动部分？

我正在尝试在 vuejs 中为一些产品创建一个无限的水平滚动部分，但我正在努力获得无限的效果。我曾尝试移除不在视野中的卡片并将其添加为最后一张卡片，但这会导致奇怪的捕捉效果而不是平滑滚动。

Here is a CodePen 使用 scrollTo 平滑滚动并将行为设置为 smooth。

除了移除卡片并在最后添加卡片之外，还有更好的选择吗？

解决方法

您可以使用滚动检测来确定滚动是否到达结束并添加更多项目；

这是如何实现这一目标的示例！

HTML：

<div :style="height:350px ';overflow-y: auto;overflow-x: hidden;'" @scroll="onScroll">
HTML CODE HERE
</div>

在这种情况下，我们将样式设置为固定高度，该示例适用于垂直无限滚动。但是你可以适应水平使用。

我们使用 @scroll 来检测何时执行滚动并调用 onScroll(e) 函数

Javascript

onScroll(e){
  if((e.target.offsetHeight + e.target.scrollTop) >= e.target.scrollHeight) {
    // Insert your logic here! Request api for example and add to the list of items
  }
},

该函数比较滚动是否到达末尾并执行代码。

额外：

您可以在 HTML 中添加过渡组，以提供添加项目的效果。

如果您的项目是静态的并且是硬编码的，那么它们是其他方法，如果是这种情况，请告诉我