HarmonyOS Next应用开发实战——推荐组件实现（part1）

HarmonyOS Next应用开发实战——推荐组件实现

文章概要

本文聚焦于HarmonyOS Next应用开发中推荐组件的实现。详细介绍了该组件的页面布局、数据加载、滑动交互以及动画效果等功能，通过使用Swiper、List等组件构建页面，结合LazyDataSource实现数据的懒加载，同时利用滑动事件实现了页面元素的动态变化和动画效果。

核心功能介绍

1. 组件初始化与数据加载

在组件初始化时，设置了一些初始状态和数据，如Swiper的图片列表、网格布局数据和活动列表等，并在aboutToAppear方法中加载活动列表数据。

@Component
export struct RecommendationComp {
  @StorageProp('avoidArea') topHeight: number = 0;
  swiperList: Resource[] = [
    $r('app.media.back0'), $r('app.media.back0'), $r('app.media.back0'), $r('app.media.back0')
  ]
  grids: IGrid[] = [
    { title: '轿车云店', icon: $r('app.media.icon1') },
    { title: '试乘试驾', icon: $r('app.media.icon2') },
    { title: '圈子', icon: $r('app.media.icon3') },
  ];
  activityList: LazyDataSource<RecomActivityInfo> = new LazyDataSource();
  // 其他状态变量...

  aboutToAppear(): void {
    this.activityList.pushArrayData(RecomActivity.getMainList())
  }
}

2. Swiper组件使用

使用Swiper组件展示图片列表，并根据滑动状态设置自动播放和指示器样式。

Swiper() {
  ForEach(this.swiperList, (item: Resource) => {
    Image(item).blur(this.radius / 10)
      .height(this.swiperHeight)
  })
}
.autoPlay(this.swiperHeight !== this.tabHeight)
.indicator(
  this.swiperHeight !== this.tabHeight ?
  new DotIndicator()
    .itemWidth(RecommendationConstants.DOTINDICATOR_WIDTH)
    .itemHeight(RecommendationConstants.DOTINDICATOR_HEIGHT)
    .selectedItemWidth(RecommendationConstants.SELE_DOTINDICATOR_WIDTH)
    .selectedItemHeight(RecommendationConstants.DOTINDICATOR_HEIGHT)
    .color(RecommendationConstants.DOTINDICATOR_DEF_COLOR)
    .selectedColor(RecommendationConstants.DOTINDICATOR_SELE_COLOR)
    .bottom(0): false
)
.width(CommonConstants.COLUMN_WIDTH)
.height(this.swiperHeight)
.zIndex(1)