HarmonyOS NEXT应用开发—多层级轮播图案例

介绍

本示例介绍使用ArkUIstack 组件实现多层级瀑布流。该场景多用于购物、资讯类应用。

效果图预览

使用说明

1. 加载完成后显示轮播图可以左右滑动。

实现思路

SwiperDataSource，实现IDataSource接口的对象，用于LazyForEach加载数据。源码参考SwiperData.ets

/**
 * 实现IDataSource接口的对象，用于轮播图组件加载数据
 */
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: SwiperData[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): SwiperData {
    return this.originDataArray[index];
  }

  /**
   * 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
   */
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  /**
   * 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
   */
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
  ...

2.通过stack和offsetx实现多层级堆叠。源码参考SwiperComponent.ets

Stack() {
  LazyForEach(this.swiperDataSource, (item: SwiperData, index: number) => {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image(item.imageSrc)
        .objectFit(ImageFit.Auto)
        .width('100%')
        .height('100%')
        .borderRadius($r('app.string.main_page_top_borderRadius'))
  ...

3.通过手势控制调用显式动画同时修改数据中间值currentIndex来修改组件zIndex提示组件层级实现动画切换效果。源码参考SwiperComponent.ets

https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/swipercomponent/src/main/ets/components/mainpage/SwiperComponent.ets

高性能知识点

本示例使用了LazyForEach进行数据懒加载以降低内存占用。

工程结构&模块类型

functionalscenes                                // har类型
|---model
|   |---SwiperData.ets                          // 轮播数据模型和数据控制器 
|---mainpage
|   |---FunctionalScenes.ets                    // 轮播页面

模块依赖

不涉及

参考资料

1.lazyForeach参考文档
2.animationTo参考文档

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

腾讯T10级高工技术，安卓全套VIP课程全网免费送：https://qr21.cn/D2k9D5