uniapp onshow生命周期如何使用

在uniapp中，onshow生命周期函数具体怎么使用？我看文档说它在页面显示时触发，但实际开发时发现有时候不执行。请问正确的用法是什么？是否需要配合onLoad或onReady一起使用？还有没有其他需要注意的地方？求大佬解答！

2 回复

在uniapp中，onshow是页面显示时触发的生命周期函数。在页面中直接定义即可：

onShow() {
  console.log('页面显示了')
  // 可以在这里更新数据或执行其他操作
}

onshow每次页面显示都会执行，比如从其他页面返回或首次进入。


在 UniApp 中，onShow 是页面的生命周期函数之一，在页面显示时触发（例如从其他页面返回、应用从后台切换到前台时）。它常用于数据刷新、状态更新等场景。

使用方法：

  1. 在页面 pages 中定义：在页面的 .vue 文件或 pages.json 对应的页面路径下的脚本中直接定义。
  2. 语法：使用 onShow 函数，无需导入。

示例代码：

export default {
  onShow() {
    // 页面显示时执行的操作
    console.log('页面已显示');
    this.loadData(); // 例如刷新数据
  },
  methods: {
    loadData() {
      // 模拟数据加载
      console.log('重新加载数据');
    }
  }
}

常见应用场景：

  • 刷新数据：从其他页面返回时更新列表或用户信息。
  • 恢复状态：例如重新开始动画或计时器。
  • 权限检查：确保用户登录状态有效。

注意事项：

  • onShow 在页面每次显示时都会触发，包括首次加载和从后台切换。
  • 与 onLoad 不同，onLoad 只在页面首次创建时触发一次。
  • 避免在 onShow 中执行耗时操作，以防页面卡顿。

如果有具体需求（如结合路由参数），可进一步调整代码逻辑。

回到顶部