微信小程序中事件

时间：2021-03-14 06:15:01

微信小程序中事件

一.常见的事件有

类型 触发条件 最低版本
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 设备，重按时会触发

有两个注意点：

	Touchcancle: 在某些特定场景下才会触发（比如来电打断等）

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

二.书写方式

页面中

不需要传参的事件

<!--写法一 bind事件名='函数名' -->

<button bindtap="fuck">点我</button>

<!--写法一 bind:事件名='函数名' -->

需要传参的事件

<!-- 点击传参data-传过去的key='变量值' -->

<button bindtap="fuck_1" data-name="ywy">传参</button>

<!-- 点击传变量data-传过去的key='{{变量名}}' -->

<button bindtap="fuck_2" data-number='{{a}}'>{{a}}</button>

js文件中

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不是

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

页面中js

  func:function(e){

    this.setData({

        变量名:this.data.变量名++

    })

  },

相关文章