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

3. List组件与数据展示

使用List组件展示网格布局和活动列表，通过LazyForEach实现活动列表的懒加载。

List({ scroller: this.scroller }) {
  ListItem() {
  }.height(this.whiteboardHeight)

  ListItem() {
    Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
      ForEach(this.grids, (item: IGrid) => {
        Row({ space: 6 }) {
          Image(item.icon)
            .offset({ y: 3 })
            .width(24)
          Text(item.title)
            .fontSize(CommonConstants.S_FONT_SIZE)
        }
        .backgroundColor(Color.White)
        .padding(CommonConstants.PUBLIC_SPACE)
        .width('28%')
        .justifyContent(FlexAlign.Center)
        .height(RecommendationConstants.BOX_HEIGHT)
        .borderRadius(8)
      })
    }
    .width(CommonConstants.COLUMN_WIDTH)
    .margin({ top: CommonConstants.PUBLIC_SPACE * 2, bottom: CommonConstants.PUBLIC_SPACE * 3 })
  }
  .linearGradient({
    angle: 0,
    colors: [['rgb(255, 255, 255)', 0], ['rgb(229, 238, 238)', 1]]
  })

  LazyForEach(this.activityList, (item: RecomActivityInfo) => {
    ListItem() {
      this.listItem(item)
    }
  })
}

4. 滑动交互与动画效果

通过监听List的滑动事件，实现页面元素的动态变化和动画效果，如Swiper的高度变化和模糊效果。

.onScroll((scrollOffset: number, scrollState: ScrollState) => {
  if (this.whiteboardHeight <= this.defWhiteboardHeight) {
    this.whiteboardHeight -= scrollOffset;
  }
  if (!this.flagReachStart) {
    return;
  }
  if (this.radius >= 0 && this.radius <= this.defWhiteboardHeight) {
    this.changeState(scrollOffset)
  }
  if (scrollOffset > 0) {
    this.flagUP = true;
  } // 向上滑
  if (scrollOffset < 0) {
    this.flagUP = false;
  } // 向下滑
  if (scrollState === 2) {
    this.scrollFun()
  }
})
.onScrollIndex((start: number, end: number, center: number) => {
  this.flagReachStart = start === 0;
})
.onScrollStop(() => {
  this.scrollFun()
})

5. 动画处理函数

scrollFun函数根据滑动方向和滑动距离，使用animateTo函数实现动画效果，控制Swiper和白板的高度变化。

scrollFun() {
  if (this.radius === this.defWhiteboardHeight && !this.flagReachStart) {
    return;
  } // 继续向上/向下滑
  let radius = 0;
  if (this.radius < 0) {
    radius = -this.radius;
  } else {
    radius = this.radius;
  }
  if (this.flagUP) { // 向上滑
    if (radius >= this.defWhiteboardHeight / 2) {
      animateTo({ duration: this.animateTime }, () => {
        this.radius = this.defWhiteboardHeight;
        this.swiperHeight = this.tabHeight;
        this.whiteboardHeight = 0;
      })
    } else {
      animateTo({ duration: this.animateTime }, () => {
        this.radius = 0;
        this.swiperHeight = RecommendationConstants.SWIPER_HEIGHT;
        this.whiteboardHeight = this.defWhiteboardHeight;
      })
      this.scroller.scrollToIndex(0)
    }
  } else { // 向下滑
    if (this.swiperHeight >= RecommendationConstants.SWIPER_HEIGHT) {
      animateTo({ duration: this.animateTime }, () => {
        this.radius = 0;
        this.swiperHeight = RecommendationConstants.SWIPER_HEIGHT;
        this.whiteboardHeight = this.defWhiteboardHeight;
        this.scroller.scrollToIndex(0)
      })
    } else {
      if (radius >= this.defWhiteboardHeight / 2) {
        animateTo({ duration: this.animateTime }, () => {
          this.radius = 0;
          this.swiperHeight = RecommendationConstants.SWIPER_HEIGHT;
          this.whiteboardHeight = this.defWhiteboardHeight;
        })
      } else {
        animateTo({ duration: this.animateTime }, () => {
          this.radius = this.defWhiteboardHeight;
          this.swiperHeight = this.tabHeight;
          this.whiteboardHeight = 0;
        })
      }
    }
  }
}

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富的推荐组件。