HarmonyOS Tabs和Swiper联合使用问题

Tabs和Swiper联合使用时候,Swiper滑动到最后一屏之后无法滑动到下一个tabContent页面或者左滑无法返回上一个页面

操作步骤：

Column() {
  Row({ space: 5 }) {
    ForEach(this.musicAblumDatas, (item: string, tabIndex: number) => {
      Text(item)
        .fontSize(this.selectedIndex === tabIndex ? 20 : 18)
        .fontColor(this.selectedIndex === tabIndex ? "#FF201E1E" : Color.Black)
        .onClick(() => {
          // 更新被选中的tabBar下标
          this.selectedIndex = tabIndex;
        })
    }, (item: string) => JSON.stringify(item))
  }
  .align(Alignment.Start)
  .height(50)
  .width('80%')
  Tabs({ index: this.selectedIndex }) {
    TabContent() {
      Swiper(this.swiperController0) {
        ForEach(this.swiperDatas0, (item: AudioVoList[], index: number) => {
          MenuItemComponent({ swiperDatas: item })
        }, (item: AudioVoList[], index: number) => index + JSON.stringify(item))
      }
      .nextMargin(120)
      .indicator(false)
      .index(0)
      .loop(false)
      .autoPlay(false)
      .backgroundColor(Color.Yellow)
      .height(300)
      .width('100%')
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent)=>{
        this.swiperController1.showNext();
      })
      .onChange((index:number)=>{
        if (this.swiperDatas0.length===index) {
          this.selectedIndex=1;
        }
      })
    }

    TabContent() {
      Swiper(this.swiperController1) {
        ForEach(this.swiperDatas1, (item: AudioVoList[], index: number) => {
          MenuItemComponent({ swiperDatas: item })
        }, (item: AudioVoList[], index: number) => index + JSON.stringify(item))
      }
      .index(0)
      .nextMargin(120)
      .indicator(false)
      .loop(false)
      .autoPlay(false)
      .backgroundColor(Color.Yellow)
      .height(300)
      .width('100%')
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent)=>{
        this.swiperController0.showNext();
      })
      .onChange((index:number)=>{

      })
    }
  }
  .vertical(false)
  .scrollable(true)
  .height(300)
  .backgroundColor('#FFE60E0E')
  .barHeight(0)
  .onChange((index: number) => {
    this.selectedIndex = index;
  })
}
.width('100%')

HarmonyOS

zxjiu

2024-12-25 08:02:55

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

参考下这个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%')
  }
}

2024-12-25 09:51:37

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Tabs和Swiper联合使用问题

订阅鸿蒙技术特刊，精选内容抢先看