码迷,mamicode.com
首页 > 微信 > 详细

微信小程序学习Course 2 事件

时间:2018-09-15 11:01:13      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:tail   course   scree   html   增加   参数   time   对象   获取   

微信小程序学习Course 2 事件

事件是用来打通逻辑层与视图层的枢纽,我们一般在视图层(WXML文件)对某个控件绑定事件函数,在逻辑层(JS文件)编写事件函数代码。

2.1 事件类型

小程序中有两类事件

1、冒泡事件:当一个组件的事件被触发时,该事件会向父节点传递数据。

2、非冒泡事件:当一个组件上的事件被触发时,该事件不会向父节点传输数据。

 

2.2 事件绑定

事件的绑定比较简单,在视图层中增加类似如下代码,事件通常有两种开头,一种时bind以他开头代表普通模式;另一种是catch开头,他会阻止冒泡事件冒泡。初期只需要用bind模式即可

<view bindtap="viewTap"> click me </view>

  上述代码中bindtap代表点击事件,他所触发的函数为viewTap,所以我们在逻辑层编写viewTap函数即可。

如下所示:

Page({
  viewTap: function(e) {
    console.log(‘view tap‘)
  }
})

  定义一个函数viewTap,入口参数为e,此对象会携带一些数据,可以供我们操作使用。

 

2.3 事件对象

      函数viewTap,入口参数为e,此对象会携带一些数据,可以供我们操作使用。

1、type事件类型

e.type   事件类型,tap类型或者其他类型

2、timeStamp触发时间

 

3、target触发源

e.target.id   得到触发源组件的id

e.target.offsetLeft   组件坐标的偏移量

e.target.offsetTop   组件坐标的偏移量

e.target.dataset.org   获取data开头的数据,在控件中我们可以定义data开头的变量参数

例如

<view data-org = "test" bindtap = "tap1">

  如上代码视图层定义了data-org参数,则可以在逻辑层通过e.target.dataset.org获取其值。

4、detail

detail会对应一些表单输入

5、touch属性

pageX pageY文档触摸点偏移量

screenX screenY 屏幕偏移量

 

 

微信小程序学习Course 2 事件

标签:tail   course   scree   html   增加   参数   time   对象   获取   

原文地址:https://www.cnblogs.com/flyingjun/p/9645199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!