HarmonyOS 无限滑动的广告模块

用组件加手势加动画去实现，参考示例如下：

//资源图片放在 ${project.dir}\entry\src\main\resources\rawfile\img 目录下
// page.ets
import curves from '@ohos.curves';

@Preview
@Entry
@Component
struct StackDemo {
  @State message: string = 'Hello World'
  @State list: Array<Slide> = [
    new Slide("1", "img/ic_banner01.png"),
    new Slide("2", "img/ic_banner02.png"),
    new Slide("3", "img/ic_banner03.png"),
  ]
  @State aheadIndex: number = 0;
  @State offsetX: number | string = 0;

  build() {
    Row() {
      Stack() {
        ForEach(this.list, (item: Slide, index: number) => {
          Row() {
            Image($rawfile(item.src))
              .scale({ x: this.getScale(index), y: this.getScale(index), centerX: 0 })
          }
          .offset({ x: this.getOffsetX(index), y: 0 })
          .zIndex(this.getZIndex(index))
        }, (item: Slide) => item.id)
      }
      .width("100%")
      .gesture(
        PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
          .onActionUpdate((event?: GestureEvent) => {
            this.handlePanGestureUpdate(event?.offsetX);
          })
          .onActionEnd((event?: GestureEvent) => {
            this.handlePanGestureEnd(event?.offsetX);
          })
      )
    }
    .height("20%")
    .padding({ top: 5, left: 5, right: 5 })
  }

  getRealIndex(index: number): number {
    if (index < this.aheadIndex) {
      return (this.list.length - 1) - this.aheadIndex + (this.aheadIndex - index);
    }
    return index - this.aheadIndex;
  }

  getScale(index: number): number {
    let width = 1 - (this.getRealIndex(index) + 1) * 0.05;
    return width;
  }

  getOffsetX(index: number): number | string {
    let realIndex = this.getRealIndex(index);
    if (index == this.aheadIndex) {
      return this.offsetX;
    }
    return realIndex * 25;
  }

  getZIndex(index: number): number {
    console.log(`zIndex:${this.aheadIndex}`)
    return -this.getRealIndex(index);
  }

  handlePanGestureUpdate(offsetX?: number): void {
    if (!offsetX || offsetX > 0) {
      return;
    }
    console.log(`Update offsetX:${offsetX}`)
    animateTo({ curve: curves.springMotion() }, () => {
      this.offsetX = offsetX!;
    })
  }

  handlePanGestureEnd(offsetX?: number): void {
    if (!offsetX) {
      return;
    }
    console.log(`End offsetX:${offsetX}`)
    if (offsetX < -180) {
      animateTo({ curve: curves.springMotion() }, () => {
        this.offsetX = "-100%";
      })
      setTimeout(() => {
        console.log("swipe next")
        this.aheadIndex = this.aheadIndex == this.list.length - 1 ? 0 : this.aheadIndex + 1;
        this.offsetX = 0;
      }, 400)
    } else {
      animateTo({ curve: curves.springCurve(10, 1, 228, 30) }, () => {
        this.offsetX = 0;
      })
    }
  }
}
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.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.

// model.ets
export class Slide {
  id: string;
  src: string;

  constructor(id: string, src: string) {
    this.id = id;
    this.src = src;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.