前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序中事件

微信小程序中事件

作者头像
小小咸鱼YwY
发布于 2020-06-19 08:06:51
发布于 2020-06-19 08:06:51
1.5K00
代码可运行
举报
文章被收录于专栏:python-爬虫python-爬虫
运行总次数:0
代码可运行

微信小程序中事件

一.常见的事件有

类型

触发条件

最低版本

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

手指触摸动作被打断,如来电提醒,弹窗

touchend

手指触摸动作结束

tap

手指触摸后马上离开

longpress

手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

1.5.0

longtap

手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend

会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart

会在一个 WXSS animation 动画开始时触发

animationiteration

会在一个 WXSS animation 一次迭代结束时触发

animationend

会在一个 WXSS animation 动画完成时触发

touchforcechange

在支持 3D Touch 的 iPhone 设备,重按时会触发

有两个注意点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
	Touchcancle: 在某些特定场景下才会触发(比如来电打断等) 

​ tap事件和longpress事件通常只会触发其中一个

二.书写方式

页面中

不需要传参的事件
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--写法一 bind事件名='函数名' -->
<button bindtap="fuck">点我</button>
<!--写法一 bind:事件名='函数名' -->
需要传参的事件
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 点击传参data-传过去的key='变量值' -->
<button bindtap="fuck_1" data-name="ywy">传参</button>
<!-- 点击传变量data-传过去的key='{{变量名}}' -->
<button bindtap="fuck_2" data-number='{{a}}'>{{a}}</button>

js文件中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
fuck:function(){
    console.log('1111111')
  },
  fuck_1: function (data) {
   console.log(data)
  },
  fuck_2: function (e) {
    console.log(e)
  },

三.有传参的事件取值

事件传递参数

当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

data-属性来完成:

1 格式:data-属性的名称

2 获取:e.currentTarget.dataset.属性的名称

currentTarget和target的区别

这个区别普通的标签看不出来,但是一旦有标签的父标签页有一个事件时候,这时候就有区别,currentTarget指向的是本身的函数调用传的参数,而target不是

四.传参和定义变量之间的操作

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
页面中js
  func:function(e){
    this.setData({
        变量名:this.data.变量名++
    })
  },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
零基础微信小程序开发——WXML 模板语法之事件绑定(保姆级教程+超详细)
在小程序开发中,事件是渲染层(Webview)到逻辑层(JsCore)的通讯方式。简单来说,当用户与小程序界面进行交互时(如点击按钮、滑动页面等),这些交互行为会被捕获并转化为特定的事件。这些事件随后被发送给逻辑层,逻辑层接收到事件后,会根据预定义的回调函数来处理这些事件,并执行相应的业务逻辑。
小白的大数据之旅
2025/05/16
510
零基础微信小程序开发——WXML 模板语法之事件绑定(保姆级教程+超详细)
【愚公系列】2022年08月 微信小程序-view冒泡事件详解
文章目录 前言 一、hover-class ---- 前言 微信小程序事件主要分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。 WXML的冒泡事件列表: 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longpr
愚公搬代码
2022/09/26
5750
微信小程序【事件绑定】入门一篇就搞定
上述代码就四行,首先是一个 input 输入框,目的是用来输入一些值,同时下面标签就会显示,接着是两个 button 用来分别执行 +1 或者 -1 的操作,最后一个 view 标签就是为了 进行数据输入或变化的回显
BWH_Steven
2020/09/10
2.3K0
微信小程序【事件绑定】入门一篇就搞定
10、微信小程序免费视频教程之事件绑定
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
用户1272076
2019/03/26
6030
微信小程序之事件系统
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
1.4K0
微信小程序基础
v-for ⇒ wx:for 注意点:wx:for=“{{list}}”默认每一项变量名为item;每一项索引变量名为index。 与key同时用,wx:key="index"
星辰大海c
2023/11/19
2780
微信小程序基础
【小程序】数据和事件绑定和数据同步传参
把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格
陶然同学
2023/02/24
9900
【小程序】数据和事件绑定和数据同步传参
全栈开发工程师微信小程序-下
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
达达前端
2019/07/03
7630
全栈开发工程师微信小程序-下
微信小程序入门教程之三:脚本编程
今天,接着往下讲,教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动。学会了脚本,就能做出复杂的页面了。
ruanyf
2020/11/03
1.8K0
微信小程序入门教程之三:脚本编程
微信小程序bindtap的作用_小程序分享带参数
之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap=’setNumber’,而不是bindtap=’setNumber(1)’,在js中只要写function(e).通过e可以获取所传过来元素的所有信息。
全栈程序员站长
2022/08/03
4.6K0
微信小程序bindtap的作用_小程序分享带参数
二、小程序框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
天蝎座的程序媛
2023/10/17
3590
二、小程序框架
【微信小程序】冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化
哈喽大家好,本期是微信小程序专栏第十四期。上期我们实现了从welcome页面跳转到page页面,本期我们先对上期内容进行一个补充知识点,也就是冒泡事件与非冒泡事件的定义。本期主要实现的功能是将page.js中的文章数据分离到一个单独的js中,即将文章数据从业务中分离,通过这一功能的实现学习wxml的模块与模块化等知识点。 注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~
颜颜yan_
2022/12/01
6740
【微信小程序】冒泡事件与非冒泡事件、将文章数据从业务中分离、wxml的模块化
原生小程序开发注意事项总结
这里很多开发者喜欢使用RGB或者十六进制的值进行表示颜色,别的属性可以,上面两个不行
何处锦绣不灰堆
2022/06/01
5910
微信小程序复习巩固 —— (事件处理,数据渲染,使用模板,属性自定义)
在事件的捕捉中可以使用 bind 以及 catch,下面以简单的实例给大家展示一下事件冒泡
Gorit
2021/12/09
7410
微信小程序复习巩固 —— (事件处理,数据渲染,使用模板,属性自定义)
微信小程序:WXML模板语法
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。
岳泽以
2023/03/17
2.2K0
微信小程序:WXML模板语法
【微信小程序】事件绑定
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的形式,反馈到逻辑层进行业务的处理。
hacker707
2022/10/31
1.1K0
【微信小程序】事件绑定
微信小程序开发全流程:从注册到上线的完整指南
这种说法不能说不真实,只能说肯定不是这么简单的事情。毕竟广告收入的多少,归根结底还是取决于用户量,不可能随便做个小程序,就能吸引大量用户来看广告。
苏琢玉
2025/03/13
6750
微信小程序开发全流程:从注册到上线的完整指南
vue和微信小程序的区别
vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。
IT工作者
2022/02/22
1.4K0
Belinda的小程序踩坑记(一)
微信小程序出来已有段时间,虽还在内测阶段。利用空闲时间,我把蜂贷微信项目部分迁移到小程序上。 目录结构 小程序的主体由三个文件组成,这三个文件要放在项目的根目录下,分别是 1、app.js 配置小程序的逻辑 2、app.json 公共设置 3、app.wxss 公共样式 小程序可以自定义 page,但是 page 需要在 app.json 中做出声明,不然IDE会报错,找不到页面。小程序的页面由四个文件组成,分别是 1、.js文件 页面逻辑 2、.wxml 视图层文件,页面结构 3、.wxss 样式文件,页
极乐君
2018/02/05
1.3K0
Belinda的小程序踩坑记(一)
微信小程序target和currentTarget的区别
currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值
用户2323866
2021/06/23
1.7K0
推荐阅读
相关推荐
零基础微信小程序开发——WXML 模板语法之事件绑定(保姆级教程+超详细)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验