当前位置：首页 > uni-app

uniapp监听页面

2026-03-05 02:56:54uni-app

监听页面生命周期

在uniapp中监听页面生命周期可以通过两种方式实现：使用页面生命周期钩子函数或使用全局事件监听。

页面生命周期钩子函数 每个页面可以定义特定的生命周期函数，这些函数会在对应生命周期阶段自动触发。例如：

export default {
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  }
}

全局事件监听 通过uni.on/uni.off方法可以监听全局的页面生命周期事件：

// 监听页面显示事件
uni.onPageShow((res) => {
  console.log('页面显示', res);
});

// 监听页面隐藏事件
uni.onPageHide((res) => {
  console.log('页面隐藏', res);
});

监听页面滚动

监听页面滚动可以使用onPageScroll生命周期函数：

export default {
  onPageScroll(e) {
    console.log('页面滚动', e.scrollTop);
  }
}

对于需要节流处理的滚动事件，可以配合使用lodash的throttle方法：

import { throttle } from 'lodash';

export default {
  onPageScroll: throttle(function(e) {
    console.log('节流后的滚动事件', e.scrollTop);
  }, 200)
}

监听页面尺寸变化

监听窗口尺寸变化可以使用onResize生命周期函数：

export default {
  onResize(res) {
    console.log('窗口尺寸变化', res.size);
  }
}

监听页面返回事件

处理页面返回操作可以通过onBackPress生命周期函数：

export default {
  onBackPress() {
    console.log('返回按钮被点击');
    // 返回true可以阻止默认返回行为
    return true;
  }
}

自定义事件监听

除了系统提供的事件，还可以使用uni.$on/uni.$emit实现跨页面通信：

// 页面A发送事件
uni.$emit('customEvent', { data: 'value' });

// 页面B监听事件
uni.$on('customEvent', (data) => {
  console.log('接收到自定义事件', data);
});

// 记得在页面卸载时移除监听
uni.$off('customEvent');