如何监听组件再次显示的事件？

上海张律师2025-06-03 17:10

我们知道，对于组件的生命周期，有aboutToAppear和aboutToDisAppear，即监听这个组件被挂载和卸载的事件，和被@Entry修饰的页面不同，组件是没有每次显示都能触发的onPageShow这个生命周期的，但是实际上，自定义组件也会有这方面的需求。

我们来看一下这样的场景：

项目的主页面Index.ets，使用Tabs来加载4个子组件（即4个子页面，为了方便理解就统一讲子组件了），有一个叫Page1.ets的子组件，我希望在每次点开的时候（即通过tab切换到这个页面的时候），都能执行一遍一个上下跳动的动画效果。

那么对于子组件的显示，是通过tab的切换实现的，而且是当你切换到某个子组件的时候，这个子组件才会被挂载，但是当你切换到别的子组件时，之前被挂载的子组件并不会被卸载，所以，当你切换回来（类似于onPageShow）的时候，对应的aboutToAppear并不会被再执行一遍。也就是如果我把执行动画效果的代码放在aboutToAppear中的话，这个效果也只会被执行一遍，无法实现我所期望的每次显示都执行一遍的效果。

当然，从挂载卸载的角度触发，也有别的方法，比如用IF来作条件渲染，即监听Tabs的onChange事件，然后通过IF判断这个index，来显示子组件，效果是能实现的，但是会有一个很明显的闪烁，当然这可能是预览器的问题......不过这个方案终究还是不可取的，因为你还要考虑到，子组件里不光是动画，还会有数据加载页面渲染等等一堆事情，你不可能每次切换过来都把这些事情执行一遍的。

最后我在文档里发现了这么一个东西：onVisibleAreaChange，官方的介绍是：组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件，提供了判断组件是否完全或部分显示在屏幕中的能力，适用于广告曝光埋点之类的场景。看完文档，简化的理解就是：这个子组件显示和被隐藏的时候触发对应的代码。

实现的代码如下：

typescript 复制代码

.onVisibleAreaChange([0.0, 1.0], (isExpanding: boolean, currentRatio: number) => {
      if (isExpanding && currentRatio >= 1.0) {
        this._Donghua();
      }

      if (!isExpanding && currentRatio <= 0.0) {
        this.y =[20,20,20];
      }
    })