基于Vue.js的无限滚动时间轴调度器实现方案咨询

现有方案评估 #

你用3个全屏日期区块滚动替换的思路方向是对的，但存在两个核心问题：

• 每次替换列表会触发全量重渲染，当每日包含大量预约内容时，DOM操作成本会急剧上升，导致滚动卡顿
• 日期跳转需要重建列表，无法快速定位到任意日期，交互体验差

优化思路（符合无第三方库、高性能、易实现要求） #

1. 循环复用DOM的虚拟滚动思路 #

不要每次替换整个datelist，而是固定渲染3个日期容器（比如date-panel-1、date-panel-2、date-panel-3），当滚动触发切换条件时：

• 向左滚动：把最右侧的容器移动到最左侧，更新它的日期为当前最左侧日期的前一天，同时调整滚动位置（让视觉上保持连续滚动）
• 向右滚动：把最左侧的容器移动到最右侧，更新它的日期为当前最右侧日期的后一天，同步调整滚动位置
  这种方式不会销毁重建DOM元素，仅更新容器内的日期和内容，大幅降低重渲染成本。

2. 滚动位置与日期的绑定计算 #

不再依赖列表的自然滚动位置，而是维护两个核心状态：当前中心日期和滚动偏移量：

• 滚动时，根据偏移量判断是否需要切换日期，切换时更新中心日期，同时重置偏移量（通过修改容器的transform或调整滚动容器的scrollLeft）
• 日期选择器跳转时，直接更新中心日期，计算并设置对应的滚动偏移量，无需重建DOM容器，实现快速定位

3. 内容懒加载与缓存 #

针对每日预约内容：

• 仅渲染当前可见的3个日期的内容，其他日期内容暂不加载
• 已加载过的日期内容存入缓存对象，再次切换到该日期时直接复用，避免重复请求或渲染

4. 滚动事件节流处理 #

滚动事件触发频率极高，对切换条件的判断逻辑做节流处理（比如每100ms执行一次判断），避免频繁触发日期切换和DOM操作，提升性能

关键实现要点 #

• 用固定的3个DOM容器替代动态列表，通过移动容器位置和更新内容实现无限滚动的视觉效果
• 核心是维护currentCenterDate和scrollOffset两个状态，滚动和跳转都基于这两个状态计算
• 利用Vue的响应式特性，仅更新容器内的日期和内容，而非销毁重建容器

内容的提问来源于stack exchange，提问作者Dennis Vogel