时间线调度器的技术概念

Question

我的项目是一个可滚动的调度程序，类似于vis-timeline并使用 Vue.js。
我最大的问题之一是如何在各个方向（过去和未来）无限平滑地滚动。

我很乐意承认我还没有那么丰富的程序员经验，所以如果您检查和评估我的方法，我将不胜感激。

我的解决方案目前看起来像这样：

记者：

let datelist = [yesterday, today, tomorrow]

HTML：

<div v-for="date of datelist">
    <div width="100%" height="100%">{{date}}</div>
</div>

因为 3 个 div 占据了 300% 的屏幕，所以发生了溢出（可见滚动条）。 渲染后，我将中间的居中（今天）。

当通过拖放滚动并且前一天或后一天的 50% 可见时，会触发一个修改日期列表的事件：

向左滚动：

*生成昨天的前一天并删除明天*

datelist = [yesterday -1 day, yesterday, today]

向右滚动：

*生成明天的第二天并删除昨天*

datelist = [today, tomorrow, tomorrow + 1]

但是，这也有一些缺点：

每次列表更改时，都必须完全重新呈现。 如果以后每天都有很多内容（约会），这可能会降低性能。

你实际上只能线性滚动，一旦我想跳转到一个日期，例如使用日期选择器，我必须重新创建整个列表。

也许更多？

你会如何解决这个问题？ 我更关心解决问题的方法而不是解决方案。

约束：

• 没有第三方库
• 高性能
• 简单

Answer 1

使用IntersectionObserver是您的首选。 多亏了它，您将能够设置各种行为、获取内容并允许与其他“日期单元格”进行交互。
useIntersectionObserver可组合项是实现此类目的的理想选择。

---

仅显示当前可见的内容也很有帮助，这样 DOM 中的内容就不会太多。 这可能会有所帮助，但也可以自己完成（查看那里的源代码）。

---

我不确定为什么您的列表需要重新呈现，但可以考虑不对整个列表进行核对并在给定位置应用一些修改。
或者使用memoization approach ，这取决于您需要记住的内容，您自己实施起来可能会很快。
使用上面列出的给定方法，您甚至可能不需要从列表中删除日期，只需隐藏 (CSS) 或让它离开屏幕即可。 Aka 而不是let datelist = [yesterday, today, tomorrow] ，考虑let datelist = [..., x, y, today, z, a, b, ...]每次到达边界。

---

TLDR：由于您的限制，您只能从 3 个中选择 2 个。