十一、uni-app中的事件

📅 2026/8/24 13:58:23
十一、uni-app中的事件
一、 基础交互与手势事件在 uni-app 移动端开发中手势事件是最基础的交互能力常见于按钮点击、列表操作、长按菜单以及拖拽等场景。事件名称触发时机实际开发场景tap手指触摸后马上离开按钮点击、列表项跳转、弹窗关闭强烈建议替代clicklongpress手指触摸屏幕超过 350ms 后触发长按图片保存、长按消息弹出“删除/复制”菜单touchstart手指刚接触屏幕时触发记录拖拽元素的初始坐标touchmove手指在屏幕上持续滑动时触发配合touchstart实现拖拽跟手、滑动抽屉菜单touchend手指离开屏幕时触发拖拽结束后的位置吸附、判断左滑/右滑操作二、表单与输入事件当页面中存在input、textarea、picker等表单组件时需要用到以下事件。事件名称触发时机实际开发场景input输入框内容发生变化时实时触发搜索框的实时联想词提示、输入框右下角的字数统计confirm点击软键盘右下角按钮如“搜索/完成”时触发用户在搜索框输入关键词后点击键盘上的“搜索”键执行查询change表单组件的值发生改变且用户确认时触发切换开关switch、选择日期picker后更新页面数据focus输入框获取焦点键盘弹起时触发解决键盘弹起时遮挡底部输入框或按钮的问题blur输入框失去焦点键盘收起时触发用户输入完毕后对填写的手机号进行格式校验submit表单提交时触发点击提交按钮收集所有表单数据并发送给后端接口三、滚动与视图事件主要用于处理长列表、轮播图等需要监听滚动状态的组件如scroll-view、swiper。事件名称触发时机实际开发场景scroll滚动视图滚动时触发监听滚动距离实现“回到顶部”按钮的显示与隐藏scrolltolower滚动到底部/右边时触发核心场景实现列表的下拉加载更多分页请求scrolltoupper滚动到顶部/左边时触发实现滚动到顶部时的特殊提示或刷新load媒体资源如 image加载完成时触发图片加载完成前显示骨架屏或 loading 动画error媒体资源加载失败时触发图片加载失败时替换为默认的“加载失败”占位图四、全局事件总线跨页面/跨组件通信当两个页面或组件之间没有直接的父子关系但需要互相传递数据时使用 uni-app 提供的全局事件 API。API 方法作用实际开发场景uni.$on(eventName, callback)订阅监听一个全局事件在首页onLoad时注册监听等待其他页面发来通知uni.$emit(eventName, data)发布触发一个全局事件登录页登录成功后触发事件并携带用户信息通知首页更新uni.$off(eventName, callback)取消订阅移除监听⚠️ 必做在onUnload或beforeDestroy中移除监听防止内存泄漏uni.$once(eventName, callback)只监听一次全局事件触发一次后自动移除监听适用于只需执行一次的初始化逻辑五、实战避坑指南统一使用tap在小程序端click可能会有 300ms 的点击延迟强烈建议全项目统一使用tap替代click。全局事件必须成对出现使用了uni.$on就必须在页面销毁时onUnload使用uni.$off移除它。如果不移除每次进入页面都会叠加一次监听导致一次触发执行多次回调引发严重的 Bug。事件名命名规范全局事件名建议使用全小写加中划线如login-success千万不要以uni.开头以免与框架内部系统事件冲突。获取事件参数在 Vue3 中处理事件时记得通过e.detail获取数据。例如输入框的值是e.detail.value而不是e.target.value。