HarmonyOS鸿蒙Next中Tabs中其中一个TabContent从展示到不展示

HarmonyOS鸿蒙Next中Tabs中其中一个TabContent从展示到不展示 其中一个TabContent从展示到不展示；tabs会自动跳转到首页是为什么？

代码如下：

Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.tabsController }) {
  TabContent() {
    HomeTabPage({
      webController: this.webController,
      h5LinkAddr: this.h5LinkAddr
    })
  }
  .tabBar(this.TabBuilderHome("", 0, $r(""), $r("")))

  if (this.isShowLicaiTab) {
    // 展示某某tab
    TabContent() {
      FinanceLicaiPage()
    }
    .tabBar(this.TabBuilder("", 1, $r(""), $r("")))
  }

  TabContent() {
    MineTabPage()
  }
  .tabBar(this.mineTabBuilder("", $r(""), $r("")))
}

“某某”tab从展示到不展示，如果用户目前在我的tab，我会修改我的tab index等于1，并调用this.tabsController.changeIndex(1)，但是不生效，自动跳转到首页；代码如下

if (model.is_show_licai_tab) {
  let isNowLicaiState = this.isShowLicaiTab
  // 展示某某tab
  this.isShowLicaiTab = true;
  this.mineTargetIndex = 2;
  DXMPreferenceManager.getInstance().putDataSync(ConstUtil.IS_SHOW_DXM_LICAI_TAB_KEY, true)
  if (isNowLicaiState != this.isShowLicaiTab) {
    if (this.currentIndex == 1) {
      // 接口返回前在我的tab页面，将页面正确切换为我的tab页面
      LogUtil.info('hy-control', '2')
      this.tabsController.changeIndex(this.mineTargetIndex)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs中其中一个TabContent从展示到不展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

试下这个 demo

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

  @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 })
            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 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(1))

        if (this.showContral){
          TabContent() {
            Column() {
              Text('Tab3')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              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 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.tabBuilder(3))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })

      Button('showContral')
        .onClick(async () =>{
          if (this.currentIndex === 2) {
            this.showContral = false
            setTimeout(() =>{
              this.controller.changeIndex(2)
            },10)
          }
        })
    }.width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs中其中一个TabContent从展示到不展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Tabs组件的TabContent从展示到不展示的过程涉及到组件的生命周期和状态管理。当用户切换Tab时，当前显示的TabContent会经历从可见到不可见的状态变化。系统会自动调用相关的生命周期方法，如onPageShow和onPageHide，来管理TabContent的显示与隐藏。开发者可以通过这些生命周期方法来处理TabContent的初始化和资源释放等操作。

在HarmonyOS鸿蒙Next中，使用Tabs组件时，如果其中一个TabContent从展示到不展示，可以通过以下步骤实现：

  1. 绑定TabContent状态：使用@State或@Prop等装饰器管理TabContent的可见性。
  2. 条件渲染：在TabContent的父组件中，使用条件语句（如if）动态控制其渲染。
  3. 切换Tab：通过Tabs的index属性或onChange事件，切换当前展示的TabContent。

例如：

@State currentIndex: number = 0;

build() {
  Tabs({ index: this.currentIndex }) {
    TabContent() {
      // Tab 1 content
    }
    if (this.currentIndex !== 1) {
      TabContent() {
        // Tab 2 content, only shown when not selected
      }
    }
  }
  .onChange((index) => {
    this.currentIndex = index;
  })
}

通过这种方式，可以动态控制TabContent的展示与隐藏。

回到顶部