uniapp onhide生命周期函数的使用方法

在uniapp开发中，onHide生命周期函数具体是在什么场景下触发？它与onUnload有什么区别？我在页面跳转时发现onHide有时不执行，可能是什么原因导致的？求解答和正确使用示例。

2 回复

在uniapp中，onHide是页面隐藏时触发的生命周期函数。当用户跳转到其他页面或应用进入后台时执行。

使用方法：

onHide() {
  console.log('页面隐藏')
  // 执行清理操作或保存数据
}

常用于暂停定时器、保存页面状态等操作。


在 UniApp 中，onHide 是页面的生命周期函数之一，当页面隐藏时触发（例如用户切换到其他页面或应用进入后台）。它常用于暂停页面活动、保存临时数据或清理资源。

使用方法

  1. 在页面中定义：在页面的 .vue 文件中的 <script> 部分直接定义 onHide 函数。
  2. 执行逻辑：在函数内编写页面隐藏时需要处理的代码（如停止定时器、保存状态等）。

示例代码

<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  onShow() {
    // 页面显示时启动定时器
    this.timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)
  },
  onHide() {
    // 页面隐藏时清除定时器，避免资源浪费
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
      console.log('页面隐藏，定时器已清除')
    }
  }
}
</script>

注意事项

  • onHide 适用于页面级操作，组件中需使用其他生命周期（如 beforeDestroy）。
  • 与 onUnload 区别：onHide 在页面隐藏时触发（可能再次显示），onUnload 在页面销毁时触发（不再恢复）。
  • 适用于所有 UniApp 平台（H5、小程序、App 等）。

通过合理使用 onHide，可以优化应用性能和用户体验。

回到顶部