HarmonyOS5教育类行业实践-双向滚动课程表（一）

点我加入我的战队！领鸿蒙限定礼盒

场景介绍

双向滚动课程表是教育类应用中的典型场景之一。

本示例基于List组件和Scroll组件实现课程表横向和纵向滚动的功能。

效果预览

实现思路

1. 页面分为两部分，左侧展示课程表节数和上课时间，右侧展示星期数和课程数据列表。
2. 右侧的课程数据使用双层Scroll来实现数据的左右滑动。为了达到滑动左侧课程表时间部分和上部星期数，对应的数据也同步滑动的效果，在onScrollFrameBegin回调中设置列表的垂直滚动控制器和水平滚动控制器；反之同理。

   1. // CourseTablePage.ets
   2. Row() {
   3. Scroll(this.classScroller) {...}
   4. .onScrollFrameBegin((offset: number) => {...})
   5. Scroll(this.timeScroller) {...}
   6. .onScrollFrameBegin((offset: number) => {...})
   7. Column() {
   8. Scroll(this.weekdaysScroller) {...}
   9. .onScrollFrameBegin((offset: number) => { // 同步水平位移量
   10. this.horizontalScroller.scrollBy(offset, 0);
   11. return { offsetRemain: offset };
   12. })
   13. Scroll(this.horizontalScroller) {
   14. Scroll(this.verticalScroller) {...}
   15. .onScrollFrameBegin((offset: number) => { // 同步垂直位移量
   16. this.classScroller.scrollBy(0, offset);
   17. this.timeScroller.scrollBy(0, offset)
   18. return { offsetRemain: offset };
   19. })
   20. }
   21. .onScrollFrameBegin((offset: number) => { // 同步水平位移量
   22. this.weekdaysScroller.scrollBy(offset, 0);
   23. return { offsetRemain: offset };
   24. })
   25. ...
   26. }

3. 通过在组件的onAppear函数中对Scroller设置课程表初始定位到当前星期数。

   1. // CourseTablePage.ets
   2. Row(){...}
   3. .onAppear(() => {
   4. if(this.weekDay > 1) {
   5. this.weekdaysScroller.scrollTo({ xOffset: (this.weekDay - 1) * 130, yOffset: 0 })
   6. this.horizontalScroller.scrollTo({ xOffset: (this.weekDay - 1) * 130, yOffset: 0 })
   7. }
   8. })

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──dataModel
3. │ │ └──Course.ets // 课程数据
4. │ ├──entryability
5. │ │ └──EntryAbility.ets // 程序入口
6. │ ├──entryability
7. │ │ └──EntryBackupAbility.ets
8. │ └──pages
9. │ └──CourseTablePage.ets // 商品展示页
10. └──entry/src/main/resources // 应用资源目录

参考文档

List

Scroll

挂载卸载事件

代码下载

双向滚动课程表示例代码