uniapp监听页面
监听页面滚动事件
在uni-app中可以通过onPageScroll生命周期函数监听页面滚动事件。该函数会在页面滚动时触发，并返回滚动距离参数。
export default {
onPageScroll(e) {
console.log('页面滚动距离:', e.scrollTop)
// 可根据scrollTop值实现吸顶、渐变等效果
}
}监听页面显示/隐藏
使用onShow和onHide生命周期监听页面显示状态变化：
export default {
onShow() {
console.log('页面显示')
// 适合做数据刷新、动画启动等操作
},
onHide() {
console.log('页面隐藏')
// 适合暂停动画、清除定时器等操作
}
}监听页面加载与卸载
onLoad和onUnload用于监听页面的加载与卸载事件：
export default {
onLoad(options) {
console.log('页面加载', options)
// 获取路由参数，初始化数据
},
onUnload() {
console.log('页面卸载')
// 清除全局事件监听等收尾工作
}
}监听页面返回按钮
通过onBackPress可以监听物理返回按钮事件：
export default {
onBackPress() {
console.log('返回按钮被点击')
// 返回true可阻止默认返回行为
// 可在此实现二次确认退出等逻辑
return false
}
}使用全局事件总线监听
通过uni-app的事件总线实现跨页面通信：
// 页面A触发事件
uni.$emit('pageChange', {data: 'value'})
// 页面B监听事件
uni.$on('pageChange', (data) => {
console.log('收到页面变化事件:', data)
})
// 记得在onUnload中移除监听
uni.$off('pageChange')注意事项
- 页面生命周期函数需直接定义在Page/Component的配置对象中
- 滚动监听在iOS上可能有性能问题，避免频繁操作DOM
- 全局事件需注意及时销毁，避免内存泄漏
- H5端部分生命周期与小程序端存在差异，需做好兼容处理
