Uni-app事件处理
事件表:
| Web事件 | uni-app事件 |
| click | tap |
| touchstart | touchstart |
| touchmove | touchmove |
| touchcancel | touchcancel |
| touchend | touchend |
| tap | tap |
| longtap | longtap |
| input | input |
| change | change |
| submit | submit |
| blur | blur |
| focus | focus |
| reset | reset |
| confirm | comfirm |
| columnchange | columnchange |
| linechange | linechange |
| error | error |
| scrolltoupper | scrolltoupper |
| scrolltolower | scrolltolower |
| scroll | scroll |
在input和textarea中的change事件会被转为blur事件.
踩坑注意:
上述列表中没有的原生事件也可以使用,详情参考hcoder给出的文档
事件修饰符
注意: Vue中的事件修饰符在uni-app中有以下问题
stop-----------------使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效.
prevent-------------uni-app中基本没有什么默认事件,所以prevent阻止默认事件的行为基本上没用.
self------------------没有可以判断的标识
once----------------uni-app没有removeEventListner,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了意愿,暂不考虑
按键修饰符-------uni-app运行在智能手机端,没有键盘事件,所以不支持按键修饰符
事件绑定:与vue中的事件绑定一致,使用简写的 @
事件传参:与vue中事件传参基本一致,使用v-for
Uni-app事件处理的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- uni app以及小程序 --环境搭建以及编辑器
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...
- uni app canvas 不生效
canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...
- uni app 零基础小白到项目实战2
<template> <scroll-view v-for="(card, index) in list" :key="index"> ...
- uni app 零基础小白到项目实战
$emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- 5G到来,App的未来,是JavaScript,Flutter还是Native ?
Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发.与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Nativ ...
- JS编程常识
一.UI层的松耦合 松耦合就是要求各层遵循“最少知识原则”,或者说是各层各司其职,不要越权: HTML:结构层 CSS:表现层 JS:行为层 对于各层的职能,有一句比较贴切的解释:HTML是名词(n) ...
- JS编程
JS编程常识 一.UI层的松耦合 松耦合就是要求各层遵循“最少知识原则”,或者说是各层各司其职,不要越权: HTML:结构层 CSS:表现层 JS:行为层 对于各层的职能,有一句比较贴切的解释:H ...
随机推荐
- Android艺术——性能优化问题
这次分析方向,我们主要包括:布局优化.绘制优化.内存泄漏优化.响应速度优化.ListView优化.Bitmap优化.线程优化. 布局优化:尽量的减少布局的层级,这意味着Android绘制时的工作量会变 ...
- Vue.js 2.x笔记:服务请求axios(8)
1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...
- 洛谷P3469[POI2008]BLO-Blockade
题目 割点模板题. 可以将图中的所有点分成两部分,一部分是去掉之后不影响图的连通性的点,一部分是去掉之后影响连通性的点,称其为割点. 然后分两种情况讨论,如果该点不是割点,则最终结果直接加上2*(n- ...
- BZOJ 1855 股票交易 (算竞进阶习题)
单调队列优化dp dp真的是难..不看题解完全不知道状态转移方程QAQ 推出方程后发现是关于j,k独立的多项式,所以可以单调队列优化.. #include <bits/stdc++.h> ...
- fastclick原理剖析及其用法
移动端点击延迟事件 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟. 原因: 移动端的双击会缩放导致click判断延迟.这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件, ...
- Django中ORM介绍
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- GetFontResourceInfo 函数: 获取字体文件对应的字体名
在 win 7, gdi32.dll,找不到 GetFontResourceInfo(), 但能找到 GetFontResourceInfoW(), 用法类似. //----------------- ...
- iOS程序员 如何做到升职加薪,5年 开发经验 码农 笔记送给你!
前言: 对于我们绝大多数人来说,工作最基本的意义是我们可以通过自己的劳动换取酬劳来养活自己,尤其是对于刚毕业的学生,拥有一份全日制的工作意味着自己走出校园,踏上社会,自己真正开始独立起来. 在养活自己 ...
- Django web编程1 -- 创建项目和应用
python:3.7.2 Django:2.1.7 1.创建虚拟环境 虚拟环境是系统的一个位置,可以在其中安装包,并将其与其他python包隔离. 创建目录,命名为learning_log,并切换到这 ...
- Vim-latex 插件 的安装
ref:https://www.jianshu.com/p/ddd825064062 Vim-latex 插件 1. 安装 Vim-latex 插件是一个强大的Latex插件, 它的安装方法是: 将下 ...