位置:电子教程 > Uni-app入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
uni-app概要
通过 HBuilderX 可视化界面
通过 HBuilderX发布为小程序
通过vue-cli命令行运行uni app项目
框架简介
使用Vue.js注意事项
uni-app 常见问题
当前阅读教程:Uni-app入门教程 > uni-app 事件处理器
阅读(22555525)      收藏       赞(5685)      分享
上一篇: uni-app 列表渲染 下一篇: uni-app 表单控件绑定

几乎全支持 Vue官方文档小白教程网:事件处理器

// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件

{

    click: 'tap',

    touchstart: 'touchstart',

    touchmove: 'touchmove',

    touchcancel: 'touchcancel',

    touchend: 'touchend',

    tap: 'tap',

    longtap: 'longtap', //推荐使用longpress代替

    input: 'input',

    change: 'change',

    submit: 'submit',

    blur: 'blur',

    focus: 'focus',

    reset: 'reset',

    confirm: 'confirm',

    columnchange: 'columnchange',

    linechange: 'linechange',

    error: 'error',

    scrolltoupper: 'scrolltoupper',

    scrolltolower: 'scrolltolower',

    scroll: 'scroll'

}

注意:

l  为兼容各端,事件需使用 v-on @ 的方式绑定,请勿使用小程序端的bind catch 进行事件绑定。

l  事件修饰符

Ø  .stop:各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为

Ø  .prevent 仅在 H5 平台支持

Ø  .self:仅在 H5 平台支持

Ø  .once:仅在 H5 平台支持

Ø  .capture:仅在 H5 平台支持

Ø  .passive:仅在 H5 平台支持

l  若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle"moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

<view @touchmove.stop.prevent="moveHandle"></view>

l  按键修饰符:uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。


上一篇: uni-app 列表渲染 下一篇: uni-app 表单控件绑定
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)