時間線調度器的技術概念

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 個。