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

我们知道,对于组件的生命周期,有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];
      }
    })

相关推荐
simple丶16 分钟前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界2 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor3 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo4 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore4 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo4 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手4 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq95275 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos
HarmonyOS_SDK5 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
别说我什么都不会5 小时前
【OpenHarmony】鸿蒙开发之Jmustache
harmonyos