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

作者：码创造者 | 2024-08-21 19:57:13

踩

鸿蒙arkts 叠层轮播图

介绍

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

使用说明

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

实现思路

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'))
  ...
1
2
3
4
5
6
7
8
9

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;
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

高性能知识点

不涉及

工程结构&模块类型

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