纯血鸿蒙APP实战开发——多层级轮播图

介绍

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

使用说明

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

实现思路

1.通过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

Stack() {
  ForEach(this.swiperDataSource, (item: SwiperData, index: number) => {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image(item.imageSrc)
        .objectFit(ImageFit.Auto)
        .width('100%')
        .height('100%')
        .borderRadius($r('app.string.swipercomponent_main_page_top_borderRadius'))
      // 轮播图底部蒙层
       Stack() {
         Column() {
         }
         .width('100%')
         .height('100%')
         .backgroundColor(Color.Black)
         .opacity(0.3)
         .borderRadius({
            topLeft: 0,
            topRight: 0,
            bottomLeft: $r('app.string.swipercomponent_main_page_top_borderRadius'),
            bottomRight: $r('app.string.swipercomponent_main_page_top_borderRadius')
          })

          Text(item.name)
            .width('100%')
            .height('100%')
            .fontSize(16)
            .fontColor(Color.White)
            .textAlign(TextAlign.Start)
            .padding($r('app.string.swipercomponent_main_page_padding5'))
        }
        .height('17%')
}
.gesture(
   PanGesture({ direction: PanDirection.Horizontal })
     .onActionStart((event: GestureEvent) => {
        this.startAnimation(event.offsetX < 0);
     })
 )
startAnimation(isLeft: boolean): void {
  animateTo({
    duration: 300,
  }, () => {
      let dataLength: number = this.swiperData.length;
      let tempIndex: number = isLeft ? this.currentIndex + 1 : this.currentIndex - 1 + dataLength;
      this.currentIndex = tempIndex % dataLength;
    })
}

高性能知识点

不涉及

工程结构&模块类型

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

模块依赖

不涉及

参考资料

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

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://gitee.com/MNxiaona/733GH