本文深入解析 ImportantDays 项目中日历无限滚动的实现方案，探讨 Swiper 组件与 LazyForEach 的配合使用、IDataSource 接口的实现、数据动态追加/前插策略，以及在鸿蒙应用中实现高性能无限滚动的最佳实践。

一、无限滚动的需求

日历应用需要支持用户左右滑动浏览任意月份，这就要求日历能够"无限"延伸。但手机内存有限，不可能预生成所有月份的数据。解决方案是：

1. 预加载少量月份（如 3 个月）
2. 滑动到边界时动态追加新数据
3. 使用 LazyForEach 只渲染可见项

二、技术方案概述

Swiper (水平滑动容器)
    ↓
LazyForEach (懒加载渲染)
    ↓
CalendarDataSource (IDataSource 实现)
    ↓
DateModelList[] (月份数据数组)

各组件职责

组件	职责
Swiper	提供水平滑动交互，管理页面切换
LazyForEach	按需渲染可见页面，回收不可见页面
CalendarDataSource	管理数据数组，通知数据变化
CalendarVM	生成月份数据，处理边界追加逻辑

三、IDataSource 接口

LazyForEach 要求数据源实现 IDataSource 接口：

export interface DataChangeListener {
  onDataReloaded(): void;
  onDataAdded(index: number): void;
  onDataChanged(index: number): void;
  onDataDeleted(index: number): void;
  onDataMoved(from: number, to: number): void;
}

export interface IDataSource {
  totalCount(): number;
  getData(index: number): Object;
  registerDataChangeListener(listener: DataChangeListener): void;
  unregisterDataChangeListener(listener: DataChangeListener): void;
}

接口方法说明

方法	作用
totalCount()	返回数据总量
getData(index)	获取指定位置的数据
registerDataChangeListener()	注册数据变化监听器
unregisterDataChangeListener()	注销监听器

四、MonthWeekDataSource 实现

export class MonthWeekDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private data: DateModelList[] = [];

  totalCount(): number {
    return this.data.length;
  }

  getData(index: number): DateModelList {
    return this.data[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // 数据操作方法
  addData(data: DateModelList): void { ... }
  addDataFromHead(data: DateModelList): void { ... }
  clearData(): void { ... }
  setData(data: DateModelList[]): void { ... }

  private notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    });
  }
}

监听器模式

MonthWeekDataSource 维护一个监听器列表，当数据变化时通过 notifyDataReload() 通知所有注册的 LazyForEach 重新加载数据。

数据操作方法

// 尾部追加（向未来滚动）
addData(data: DateModelList): void {
  this.data.push(data);
  this.notifyDataReload();
}

// 头部插入（向过去滚动）
addDataFromHead(data: DateModelList): void {
  this.data.unshift(data);
  this.notifyDataReload();
}

// 清空
clearData(): void {
  this.data = [];
  this.notifyDataReload();
}

五、Swiper + LazyForEach 的使用

MonthWeekCalendar 中的实现

Swiper(this.swiperController) {
  LazyForEach(this.vm.monthWeekDataSource, (data: DateModelList) => {
    Column() {
      if (this.vm.viewType === ViewTypeEnum.MONTH) {
        this.monthGrid(data)
      } else {
        this.weekRow(data)
      }
    }
  }, (data: DateModelList, index: number) => `month_${index}`)
}
.cachedCount(CALENDAR_SWIPER_COUNT)  // 缓存3页
.index(this.vm.currentSwiperIndex)    // 初始索引
.loop(false)                          // 不循环
.indicator(false)                     // 不显示指示器
.onChange((index: number) => {
  this.handleSwiperChange(index);
})

关键配置

配置	值	说明
cachedCount	3	缓存前后各3页，保证滑动流畅
index	1	初始显示中间页（当月）
loop	false	不循环，使用动态追加实现"无限"
indicator	false	隐藏底部指示器

LazyForEach 的键值生成

(data: DateModelList, index: number) => `month_${index}`

键值使用索引生成。注意：当头部插入数据时，索引会变化，此时通过 onDataReloaded() 通知全量刷新。

六、无限滚动的核心逻辑

初始化

private initCalendarData(): void {
  this.monthWeekDataSource.clearData();
  for (let i = -1; i <= 1; i++) {
    const date = dayjs().add(i, 'month');
    this.monthWeekDataSource.addData(this.getDateList(date));
  }
}

初始加载 3 个月：上月、当月、下月。

边界检测与追加

handleHorizontalSwiper(index: number): void {
  if (index === this.monthWeekDataSource.totalCount() - 1) {
    // 滑到最后一个，追加下一个月
    const lastData = this.monthWeekDataSource.getData(
      this.monthWeekDataSource.totalCount() - 1
    );
    const lastDate = lastData[15].dayjsObj;
    const nextMonth = lastDate.add(1, 'month');
    this.monthWeekDataSource.addData(this.getDateList(nextMonth));
  } else if (index === 0) {
    // 滑到第一个，前插上一个月
    const firstData = this.monthWeekDataSource.getData(0);
    const firstDate = firstData[15].dayjsObj;
    const prevMonth = firstDate.subtract(1, 'month');
    this.monthWeekDataSource.addDataFromHead(this.getDateList(prevMonth));
  }
}

滚动场景示例

场景1：向右滚动（未来）

初始: [12月] [1月*] [2月]    (* = 当前)
滑到2月: [12月] [1月] [2月*] 
检测到末尾 → 追加3月: [12月] [1月] [2月*] [3月]
继续滑动: [12月] [1月] [2月] [3月*]
检测到末尾 → 追加4月: [12月] [1月] [2月] [3月*] [4月]

场景2：向左滚动（过去）

初始: [12月] [1月*] [2月]
滑到12月: [12月*] [1月] [2月]
检测到开头 → 前插11月: [11月] [12月*] [1月] [2月]

前插的索引处理

前插数据时，unshift 会在数组头部插入元素，导致所有索引后移。此时需要保持 Swiper 的当前显示页不变：

// MonthWeekCalendar 中的处理
private handleSwiperChange(index: number): void {
  this.vm.currentSwiperIndex = index;
  this.vm.handleHorizontalSwiper(index);

  const currentData = this.vm.monthWeekDataSource.getData(index);
  if (currentData && currentData.length > 15) {
    const middleDate = currentData[15].dayjsObj;
    if (!this.vm.selectDate.isSame(middleDate, 'month')) {
      this.vm.selectDate = middleDate;
    }
  }
}

前插后，notifyDataReload() 触发全量刷新，Swiper 会根据 currentSwiperIndex 重新定位。

七、YearDataSource 的实现

年视图使用相同的数据源模式：

export class YearDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private data: number[] = [];  // 存储年份数字

  // 接口实现与 MonthWeekDataSource 类似
  // ...

  addData(year: number): void {
    this.data.push(year);
    this.notifyDataReload();
  }

  addDataFromHead(year: number): void {
    this.data.unshift(year);
    this.notifyDataReload();
  }
}

年视图的无限滚动

private handleYearSwiperChange(index: number): void {
  if (index === this.yearDataSource.totalCount() - 1) {
    const lastYear = this.yearDataSource.getData(this.yearDataSource.totalCount() - 1);
    this.yearDataSource.addData(lastYear + 1);
  } else if (index === 0) {
    const firstYear = this.yearDataSource.getData(0);
    this.yearDataSource.addDataFromHead(firstYear - 1);
  }
  const currentYear = this.yearDataSource.getData(index);
  this.currentYear = currentYear;
  this.vm.selectDate = this.vm.selectDate.year(currentYear);
}

八、LazyForEach 的性能优势

与 ForEach 的对比

特性	ForEach	LazyForEach
渲染时机	一次性渲染全部	按需渲染可见项
内存占用	与数据量成正比	恒定（仅可见项）
滚动性能	数据多时卡顿	始终流畅
适用场景	少量数据	大量/无限数据

cachedCount 的作用

.cachedCount(CALENDAR_SWIPER_COUNT)  // 3

cachedCount 控制预渲染的页面数。设为 3 表示：

• 当前页
• 前 3 页（预渲染）
• 后 3 页（预渲染）

预渲染确保滑动时新页面已准备好，不会出现白屏。

九、数据源与组件的生命周期

组件 aboutToAppear
    ↓
LazyForEach 注册 DataChangeListener
    ↓
数据源 notifyDataReload → listener.onDataReloaded()
    ↓
LazyForEach 调用 totalCount() 和 getData()
    ↓
渲染可见页面
    ↓
用户滑动 → Swiper.onChange
    ↓
handleSwiperChange → 追加数据
    ↓
notifyDataReload → 重新渲染
    ↓
组件 aboutToDisappear
    ↓
unregisterDataChangeListener

十、常见问题与解决方案

问题1：前插数据后页面跳动

前插数据导致索引变化，Swiper 可能跳到错误的位置。

解决方案：前插后通过 notifyDataReload() 全量刷新，并确保 currentSwiperIndex 正确设置。

问题2：内存持续增长

无限追加数据会导致数组越来越大。

解决方案：可以设置最大缓存数，超过后移除最远的数据（本项目未实现，但可作为优化方向）。

问题3：键值冲突

如果使用日期字符串作为键值，前插后同一日期的键值可能重复。

解决方案：使用索引作为键值（month_${index}），前插后通过 onDataReloaded 全量刷新。

十一、总结

Swiper + LazyForEach + IDataSource 是鸿蒙应用中实现无限滚动的标准方案：

1. Swiper 提供滑动交互容器
2. LazyForEach 按需渲染，保证性能
3. IDataSource 封装数据管理，支持动态增删
4. 边界检测 + 动态追加 实现"无限"效果

这种模式不仅适用于日历，也可推广到图片轮播、新闻列表等任何需要无限滚动的场景。