# 如何监听Tabs里面TabContent页面显示

**背景知识**

TabContent将要显示的时候触发onWillShow回调。场景包括：

1.  TabContent首次显示
2.  TabContent切换
3.  页面切换
4.  窗口前后台切换

TabContent将要隐藏的时候触发onWillHide回调。场景包括：

1.  TabContent切换
2.  页面切换
3.  窗口前后台切换

**解决方案**

可以使用TabContent的onWillShow()和onWillHide()事件，在Tab页切换时上报TabContent的消失和出现。

**常见问题**

Q：如果要感知TabContent的子组件的出现或消失，如何实现？

A：可以使用onVisibleAreaChange监控子组件在屏幕上的显示或消失，当组件的可见面积与自身面积的比值变大为出现，比值变小为消失。示例代码如下：

```
@Component
struct MonitorTabContent {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          ChildrenComponent1();
        }
        // ...
      }
      .height('60%')
      .barMode(BarMode.Fixed)
      .backgroundColor(0xf1f3f5)
    }
    .width('100%')
    .height(500)
    .padding(24)
  }
}

@Component
struct ChildrenComponent1 {
  build() {
    Column() {
      Text('Tab 1 Content')
    }
    .onVisibleAreaChange([0, 1], (isExpanding, currentRatio) => {
      if(isExpanding && currentRatio > 0) {
        console.log('Tab 1 出现');
      } else if(!isExpanding && currentRatio === 0) {
        console.log('Tab 1 消失');
      }
    })
  }
}
```