HarmonyOS Tabs和Swiper联合使用问题

参考下这个demo :

class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  @State num:number=0

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#ffb554d7')
        }.tabBar(this.tabBuilder(0, '首页'))

        TabContent() {
          Column(){
            Swiper(this.swiperController) {
              LazyForEach(this.data, (item: string,index:number) => {
                if(index===0){
                  Text(item.toString())
                    .width('90%')
                    .height(160)
                    .backgroundColor(0xAFEEEE)
                    .textAlign(TextAlign.Center)
                    .fontSize(30)
                    .gesture(
                      PanGesture( new PanGestureOptions({ direction: PanDirection.Right}))
                        .onActionStart((event?: GestureEvent) => {
                          console.info('Pan start')
                        })
                        .onActionUpdate((event?: GestureEvent) => {
                          if (event) {

                          }
                        })
                        .onActionEnd(() => {
                          this.controller.changeIndex(0)
                          console.info('Pan end')
                        })
                    )
                } else if(index===9){
                  Text(item.toString())
                    .width('90%')
                    .height(160)
                    .backgroundColor(0xAFEEEE)
                    .textAlign(TextAlign.Center)
                    .fontSize(30)
                    .gesture(
                      PanGesture( new PanGestureOptions({ direction: PanDirection.Left}))
                        .onActionStart((event?: GestureEvent) => {
                          console.info('Pan start')
                        })
                        .onActionUpdate((event?: GestureEvent) => {
                          if (event) {

                          }
                        })
                        .onActionEnd(() => {
                          this.controller.changeIndex(2)
                          console.info('Pan end')
                        })
                    )
                } else {
                  Text(item.toString())
                    .width('90%')
                    .height(160)
                    .backgroundColor(0xAFEEEE)
                    .textAlign(TextAlign.Center)
                    .fontSize(30)
                }
              }, (item: string) => item)
            }
            .cachedCount(2)
            .index(0)
            .autoPlay(false)
            .interval(1000)
            .loop(false)
            .duration(0)
            .itemSpace(0)
            .curve(Curve.Linear)
            .onChange((index: number) => {
            })

          }

        }.tabBar(this.tabBuilder(1, '详情'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#ffc19757')
        }.tabBar(this.tabBuilder(2, '我的'))

      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}