只要是用户和应用有交互的关系,这些动作都是事件
web与uni-app对应事件的映射
事件映射表
// 事件映射表,左侧为 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'
}
1、/pages下创建一个events页面
2、/pages.json中配置下路由
加入
{
"path" : "pages/events/events",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
3、events.vue中写入input
<template>
<view>
<input type="text" :value="title" @input="change" />
</view>
</template>
这个input表示
当用户在编写一些文字的时候,只要是文本框中的内容发生了变化,随后就会触发change事件
事件都是以@符号展开
案例
<template>
<view>
<input type="text" :value="title"
style="background-color: #8F8F94; height: 100rpx;"
@input="change"
@focus="focus"
@blur="blur"
@confirm="confirm"
/>
</view>
</template>
然后将以上事件在<script>
中写一下
所有的自定义函数都要写在统一定的新的属性methods(){}
中
这是一个方法对象,所有的方法函数都要写在里面
methods:{
focus(){
console.log(获得焦点)
},
blur(){
console.log(失去焦点)
}
confirm(){
console.log(点击确认按钮/点击回车键)
}
}
@tap和@click两个事件同时写的话,在浏览器中tap事件会覆盖掉click事件
在手机端tap和click事件能同时触发,tap事件先被触发,但是在手机端两个取其一
@longpress和@longtap两者官方推荐用@longpress
touch事件的生命周期
- @touchstart 手指触摸动作开始
- @touchmove 手指触摸后移动
- @touchend 手指触摸动作结束
- @touchcancle 手指触摸动作被打断,如来电提醒,弹窗