HarmonyOS 鸿蒙Next中在tab下的component组件如何感知是否已显示

HarmonyOS 鸿蒙Next中在tab下的component组件如何感知是否已显示 在tab content内有多个自定义component，这些页面希望能感知到切到当前页面和切离

是否有类似onpageshow的系统方法可以感知呢

4 回复

可以用onVisibleAreaChange回调，参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

如下，onVisibleAreaChange写在Component1上,当tab1切到tab2,tab1隐藏,第二个if会执行

Tabs({
  barPosition: BarPosition.End,
  controller: this.tabsController
}) {
  TabContent() {
    Component1()
      .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
        console.info('Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
        if (isVisible && currentRatio >= 1.0) {
          console.info('Test Text is fully visible. currentRatio:' + currentRatio)
        }

        if (!isVisible && currentRatio <= 0.0) {
          console.info('Test Text is completely invisible.')
        }
      })
  }
  .tabBar(this.TabBuilder('首页', 0, $r('app.media.ic_home_focus'), $r('app.media.ic_home_normal')))
  TabContent() {
    Component2()
  }
  .tabBar(this.TabBuilder('购物车', 1, $r('app.media.ic_cart_focus'), $r('app.media.ic_cart_normal')))
}

更多关于HarmonyOS 鸿蒙Next中在tab下的component组件如何感知是否已显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以用在components上 使用onVisibleAreaChange 方法

在HarmonyOS鸿蒙Next中，TabContent组件下的Component组件可以通过onPageShow和onPageHide生命周期回调来感知是否已显示。onPageShow在组件显示时触发，onPageHide在组件隐藏时触发。你可以在Component中重写这两个方法来处理显示和隐藏时的逻辑。例如：

@Component
struct MyComponent {
  onPageShow() {
    // 组件显示时的逻辑
  }

  onPageHide() {
    // 组件隐藏时的逻辑
  }
}

通过这种方式，Component组件可以感知当前是否在TabContent中显示。

在HarmonyOS鸿蒙Next中，Component组件可以通过生命周期方法来感知是否已显示。具体来说，可以使用aboutToAppear()和aboutToDisappear()方法来监听组件的显示和隐藏状态。当组件即将显示时，aboutToAppear()会被调用；当组件即将隐藏时，aboutToDisappear()会被调用。你可以在这些方法中执行相应的逻辑来处理组件的显示和隐藏事件。

回到顶部