多层级轮播图方案

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'))
  ...

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                    // 轮播页面