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

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

相关推荐
baobao熊26 分钟前
HarmonyOS 6 云开发-用户头像上传云存储
华为·数据挖掘·harmonyos
优测云服务平台28 分钟前
优测推出HarmonyOS全场景测试服务,解锁分布式场景应用卓越品质!
分布式·harmonyos
HarmonyOS小助手3 小时前
【宝藏贴】HarmonyOS官方模板优秀案例 · 第1期:便捷生活-购物中心
harmonyos·鸿蒙·鸿蒙生态
沫小北3 小时前
HarmonyOS Lottie动画库总结
前端·harmonyos
zhanshuo18 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo18 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu719 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk19 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
liuhaikang1 天前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛111 天前
HarmonyOS应用上架流程详解
华为·harmonyos