HarmonyOS 鸿蒙Next Tabs中各个组件实现onPageShow(),onPageHide()效果

已知只有[@Entry](/user/Entry)修饰的组件才有onPageShow()生命周期，如果我们的各个Tab都需要监听onPageShow()怎么办呢？

api11中可以通过onVisibleAreaChange来实现

[@Component](/user/Component)
struct ShowHideDemo {
  build() {
    Column() {
      // 主体布局
    }
    .width('100%')
    .height('100%')
    // 根据显示区域判断
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      if (isVisible && currentRatio == 1.0) {
        // 调用自定义的show方法
        this.onPageShow()
      } else if (currentRatio == 0.0) {
        // 调用自定义的hide方法
        this.onPageHide()
      }
    })
  }
// 自定义的show,可以自己随意命名
onPageShow() {
// 做一些操作，比如恢复轮询请求
}
// 自定义的hide,可以自己随意命名
onPageHide() {
// 做一些操作，比如暂停轮询请求
}
}
>

zlyuanteng 1楼•14 天前作者

点赞~

nodeper 2楼•14 天前

滚动悬停视图页面的tab 不好使啊,因为有一部分的页面在屏幕外,这样就导致 currentRatio 的值总是小于1 .请问有什么比较好的解决办法吗

vueper 3楼•14 天前

有小 demo 能运行一下吗

htzhanglong 4楼•14 天前

在HarmonyOS（鸿蒙）的Next Tabs组件中，onPageShow() 和 onPageHide() 并非直接作为API方法存在，因为Tabs组件本身不直接提供这些生命周期回调。但你可以通过监听页面（Page）的显示与隐藏状态来间接实现类似效果。

一种常见的方法是使用页面（Page）的onActive() 和 onInactive() 生命周期方法。当页面被激活（显示）时，onActive() 会被调用；当页面被隐藏或关闭时，onInactive() 会被调用。这可以模拟 onPageShow() 和 onPageHide() 的效果。

如果问题依旧没法解决请加我微信，我的微信是itying888。