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

【问题标题】：How do I create an infinite scroll section in vuejs?如何在 vuejs 中创建无限滚动部分？
【发布时间】：2021-05-13 02:09:32
【问题描述】：

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

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

有没有更好的选择，而不是仅仅移除并在末尾添加一张卡片？

【问题讨论】：

标签： javascript css vue.js nuxt.js carousel

【解决方案1】：

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

这是一个如何实现的示例！

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 中添加一个过渡组，以产生添加项目的效果。

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

【讨论】：