HarmonyOs应用《重要日》开发第20篇 - Swiper + LazyForEach 实现日历无限滚动

本文深入解析 ImportantDays 项目中日历无限滚动的实现方案探讨Swiper组件与LazyForEach的配合使用、IDataSource接口的实现、数据动态追加/前插策略以及在鸿蒙应用中实现高性能无限滚动的最佳实践。一、无限滚动的需求日历应用需要支持用户左右滑动浏览任意月份这就要求日历能够无限延伸。但手机内存有限不可能预生成所有月份的数据。解决方案是预加载少量月份如 3 个月滑动到边界时动态追加新数据使用LazyForEach只渲染可见项二、技术方案概述Swiper (水平滑动容器) ↓ LazyForEach (懒加载渲染) ↓ CalendarDataSource (IDataSource 实现) ↓ DateModelList[] (月份数据数组)各组件职责组件职责Swiper提供水平滑动交互管理页面切换LazyForEach按需渲染可见页面回收不可见页面CalendarDataSource管理数据数组通知数据变化CalendarVM生成月份数据处理边界追加逻辑三、IDataSource 接口LazyForEach要求数据源实现IDataSource接口exportinterfaceDataChangeListener{onDataReloaded():void;onDataAdded(index:number):void;onDataChanged(index:number):void;onDataDeleted(index:number):void;onDataMoved(from:number,to:number):void;}exportinterfaceIDataSource{totalCount():number;getData(index:number):Object;registerDataChangeListener(listener:DataChangeListener):void;unregisterDataChangeListener(listener:DataChangeListener):void;}接口方法说明方法作用totalCount()返回数据总量getData(index)获取指定位置的数据registerDataChangeListener()注册数据变化监听器unregisterDataChangeListener()注销监听器四、MonthWeekDataSource 实现exportclassMonthWeekDataSourceimplementsIDataSource{privatelisteners:DataChangeListener[][];privatedata:DateModelList[][];totalCount():number{returnthis.data.length;}getData(index:number):DateModelList{returnthis.data[index];}registerDataChangeListener(listener:DataChangeListener):void{if(this.listeners.indexOf(listener)0){this.listeners.push(listener);}}unregisterDataChangeListener(listener:DataChangeListener):void{constposthis.listeners.indexOf(listener);if(pos0){this.listeners.splice(pos,1);}}// 数据操作方法addData(data:DateModelList):void{...}addDataFromHead(data:DateModelList):void{...}clearData():void{...}setData(data:DateModelList[]):void{...}privatenotifyDataReload():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.viewTypeViewTypeEnum.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);})关键配置配置值说明cachedCount3缓存前后各3页保证滑动流畅index1初始显示中间页当月loopfalse不循环使用动态追加实现无限indicatorfalse隐藏底部指示器LazyForEach 的键值生成(data:DateModelList,index:number)month_${index}键值使用索引生成。注意当头部插入数据时索引会变化此时通过onDataReloaded()通知全量刷新。六、无限滚动的核心逻辑初始化privateinitCalendarData():void{this.monthWeekDataSource.clearData();for(leti-1;i1;i){constdatedayjs().add(i,month);this.monthWeekDataSource.addData(this.getDateList(date));}}初始加载 3 个月上月、当月、下月。边界检测与追加handleHorizontalSwiper(index:number):void{if(indexthis.monthWeekDataSource.totalCount()-1){// 滑到最后一个追加下一个月constlastDatathis.monthWeekDataSource.getData(this.monthWeekDataSource.totalCount()-1);constlastDatelastData[15].dayjsObj;constnextMonthlastDate.add(1,month);this.monthWeekDataSource.addData(this.getDateList(nextMonth));}elseif(index0){// 滑到第一个前插上一个月constfirstDatathis.monthWeekDataSource.getData(0);constfirstDatefirstData[15].dayjsObj;constprevMonthfirstDate.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 中的处理privatehandleSwiperChange(index:number):void{this.vm.currentSwiperIndexindex;this.vm.handleHorizontalSwiper(index);constcurrentDatathis.vm.monthWeekDataSource.getData(index);if(currentDatacurrentData.length15){constmiddleDatecurrentData[15].dayjsObj;if(!this.vm.selectDate.isSame(middleDate,month)){this.vm.selectDatemiddleDate;}}}前插后notifyDataReload()触发全量刷新Swiper 会根据currentSwiperIndex重新定位。七、YearDataSource 的实现年视图使用相同的数据源模式exportclassYearDataSourceimplementsIDataSource{privatelisteners:DataChangeListener[][];privatedata:number[][];// 存储年份数字// 接口实现与 MonthWeekDataSource 类似// ...addData(year:number):void{this.data.push(year);this.notifyDataReload();}addDataFromHead(year:number):void{this.data.unshift(year);this.notifyDataReload();}}年视图的无限滚动privatehandleYearSwiperChange(index:number):void{if(indexthis.yearDataSource.totalCount()-1){constlastYearthis.yearDataSource.getData(this.yearDataSource.totalCount()-1);this.yearDataSource.addData(lastYear1);}elseif(index0){constfirstYearthis.yearDataSource.getData(0);this.yearDataSource.addDataFromHead(firstYear-1);}constcurrentYearthis.yearDataSource.getData(index);this.currentYearcurrentYear;this.vm.selectDatethis.vm.selectDate.year(currentYear);}八、LazyForEach 的性能优势与 ForEach 的对比特性ForEachLazyForEach渲染时机一次性渲染全部按需渲染可见项内存占用与数据量成正比恒定仅可见项滚动性能数据多时卡顿始终流畅适用场景少量数据大量/无限数据cachedCount 的作用.cachedCount(CALENDAR_SWIPER_COUNT)// 3cachedCount控制预渲染的页面数。设为 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全量刷新。十一、总结SwiperLazyForEachIDataSource是鸿蒙应用中实现无限滚动的标准方案Swiper提供滑动交互容器LazyForEach按需渲染保证性能IDataSource封装数据管理支持动态增删边界检测 动态追加实现无限效果这种模式不仅适用于日历也可推广到图片轮播、新闻列表等任何需要无限滚动的场景。