uniapp uni document事件监听如何实现

在uniapp中，如何实现对uni document的事件监听？比如点击或滚动事件，具体应该怎么实现？求详细的代码示例和步骤说明。

2 回复

在uni-app中，使用uni.$on监听全局事件，uni.$emit触发事件，uni.$off移除监听。例如：

// 监听
uni.$on('eventName', data => {
  console.log(data)
})
// 触发
uni.$emit('eventName', {msg: 'Hello'})
// 移除
uni.$off('eventName')

适用于页面间通信。


在 UniApp 中，可以通过 uni.$on、uni.$emit、uni.$once 和 uni.$off 方法实现全局事件监听和通信。这些方法用于跨页面或组件传递数据，适用于非父子组件间的通信场景。

实现步骤：

  1. 监听事件：使用 uni.$on 监听自定义事件。
  2. 触发事件：使用 uni.$emit 触发事件并传递数据。
  3. 一次性监听：使用 uni.$once 监听事件，但仅触发一次。
  4. 移除监听：使用 uni.$off 移除事件监听，避免内存泄漏。

示例代码：

  1. 在页面或组件中监听事件（例如在 onLoad 生命周期中）：

    onLoad() {
  // 监听名为 'updateData' 的事件
  uni.$on('updateData', (data) => {
    console.log('接收到数据:', data);
    // 处理数据，例如更新页面状态
    this.message = data.message;
  });
}

  2. 在另一个页面或组件中触发事件：

    // 触发 'updateData' 事件，并传递数据
uni.$emit('updateData', { message: 'Hello from another page!' });

  3. 一次性监听事件（例如只接收一次数据）：

    uni.$once('updateData', (data) => {
  console.log('一次性接收数据:', data);
});

  4. 移除事件监听（例如在 onUnload 中清理）：

    onUnload() {
  // 移除特定事件监听
  uni.$off('updateData');
  // 或移除所有事件监听
  // uni.$off();
}

注意事项：

  • 确保在页面或组件销毁时（如 onUnload）移除事件监听，防止内存泄漏。
  • 事件名需保持一致，且避免使用系统保留字。
  • 适用于全局通信，但频繁使用可能增加代码复杂度，建议结合 Vuex 管理状态。

通过以上方法，可以简单实现 UniApp 中的事件监听与通信。

回到顶部