搜索
首页微信小程序小程序开发微信小程序实战开发之视图层WXML:事件

上篇文章讲解了数据绑定、模板、逻辑等,主要的作用是在视图中展示数据,以及如何展示。但是只有展示是不够的,我们需要互动。比如一个HTML页面,可以展示文字、图片,但是还要有一些互动,比如链接、按钮等。


互动其实就是事件了。比如HTML中 button 的 onClick ,就是点击的时候,触发的动作以及开发人员相应的业务逻辑处理。


一、事件小例:bindtap

事件是视图层到逻辑层的通讯方式。将用户的行为反馈到逻辑层进行处理。一般是绑定在组件上,触发时执行处理函数,并可以携带参数。


做一个按钮,实现页面跳转。

index.wxml:

视图层WXML:事件


index.js:
toEvent : function(){

    // 跳转到 event.wxml页面   

    wx.navigateTo({
          url: '/pages/wxml/event'
    })
}


效果动图

微信小程序实战开发之视图层WXML:事件

二、事件分类:冒泡、非冒泡
冒泡事件:

    当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:

    当一个组件上的事件被触发后,该事件不会向父节点传递。


以下为冒泡事件,其他组件事件无特殊申明都是非冒泡事件

类型   

触发事件

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

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

touchend

手指触摸动作结束

tap               

手指触摸后马上离开

longtap

手指触摸后,超过350ms再离开

比如:

微信小程序实战开发之视图层WXML:事件

事件以bind或者catch开头

bind事件绑定不会阻止冒泡事件向上冒泡,如bindtap。

catch事件绑定可以阻止冒泡事件向上冒泡,如catchtap。


因为handleTap2是catchtap,所以:

点击 inner view,会先后触发 handleTap3、handleTap2

点击 middle view,只会触发 handleTap2

点击 outer view,会触发 handleTap1


在调试日志中查看

微信小程序实战开发之视图层WXML:事件

可以看到事件执行的日志 和 事件对象。

微信小程序实战开发之视图层WXML:事件

三、事件对象

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。(见上图,事件对象)

BaseEvent

type

String

事件类型

timeStamp

Integer

事件生成时的时间戳

target

Object

触发事件的组件的一些属性值集合

currentTarget

Object

当前组件的一些属性值集合

CustomEvent自定义事件(继承BaseEvent)

detail

Object

额外的信息

TouchEvent触摸事件(继承BaseEvent)

touches

Array

当前停留在屏幕中的触摸点信息的数组

changedTouches

Array

当前变化的触摸点信息的数组

事件详细介绍请参考官方文档。


target 和 currentTarget

target 和 currentTarget 可以参考上例中,点击 inner view 时,handleTap3 收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 middle。


target 和 currentTarget 中的 dataset属性
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。

书写方式: 以data-开头,多个单词由连字符-链接,所有的大写会自动转成小写,连字符转成驼峰


比如:


微信小程序实战开发之视图层WXML:事件

touches是 Touch 对象的数组


更多微信小程序实战开发之视图层WXML:事件相关文章请关注PHP中文网!


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具