HarmonyOS 切换tab,tabcontent内的子组件有相应的事件吗,为什么aboutToAppear没有触发

HarmonyOS
2025-01-09 14:46:31
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

可以采用自定义组件的形式来触发aboutToAppear

参考demo:

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

  @Builder
  tabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            TabContentBuild()
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(0))

        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            TabContentBuild()
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(1))

        TabContent() {
          Column() {
            Text('Tab3')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            TabContentBuild()
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(2))

        TabContent() {
          Column() {
            Text('Tab4')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            TabContentBuild()
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(3))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        console.error('TabContent index' + index);
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }.width('100%')
  }
}

@Component
struct TabContentBuild {

  // 组件生命周期
  aboutToAppear() {
    console.error('MyComponent aboutToAppear');
  }

  // 组件生命周期
  onDidBuild() {
    console.error('MyComponent onDidBuild');
  }

  // 组件生命周期
  aboutToDisappear() {
    console.error('MyComponent aboutToDisappear');
  }

  build() {
    Text("sdsddsd")
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:34:58
相关问题
组件事件可以传到父组件
1079浏览 • 1回复 待解决
组件中如何处理组件点击事件
3060浏览 • 1回复 待解决
HarmonyOS onVisibleAreaChange事件没有触发
448浏览 • 1回复 待解决
Tab控件切换问题哪些?
762浏览 • 1回复 待解决
HarmonyOS TabContent无法套用在组件
969浏览 • 1回复 待解决