支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)
我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外,他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。
关于这部分的视频教学请大家前往: https://edu.csdn.net/course/detail/5750
事件使用范例
页面代码:
<button id="clickbtn" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">点击我</button>
js代码:
defaultTap(event) {console.log(event.target.dataset.userName)console.log('点击者的姓名为:');},
这就是tap事件
常用的事件
类型 | 触发条件 |
---|---|
touchStart | 触摸动作开始 |
touchMove | 触摸后移动 |
touchEnd | 触摸动作结束 |
touchCancel | 触摸动作被打断,如来电提醒,弹窗 |
tap | 触摸后马上离开 |
longTap | 触摸后,超过300ms再离开 |
事件冒泡
时间冒泡其实解释起来是个非常抽象的东西。我用伪代码给大家解释下
<我是爷爷 闹钟响后=“看报”><我是爸爸 闹钟响后=“上班”><我是儿子 闹钟响后=“”上学></我是儿子></我是爸爸>
</我是爷爷>
那这三代都有一个时间就是“闹钟响后”。也就是说闹钟响后他们要发生相关的动作。
那么冒泡怎么解释呢:冒泡就好比是家里有一个声音非常大的闹钟放在儿子的房间,只要响了后爷爷、爸爸、儿子都去干自己对应的事情。这显然是不合理的,如果爷爷想要晚起呢?是不行的。
如何处理?处理的方法是在儿子,爷爷,爸爸的房间各装一个闹钟,自己设定响铃时间。在支付宝小程序中其实就是把onTap之类的事件换成catchTap。也可以理解为,当前组件捕获了tap时间不用向上传递了。
但是有一个问题如果儿子事件是onTap但是爸爸是catchTap那么当tap事件发生在儿子上时其实爸爸的tap事件也被触发了但是爸爸是catch的方式所以爷爷的tap时间不会被触发。
事件对象
defaultTap(event) {
对于每个事件有一个默认的事件对象。也就是event那么事件对象对我们有什么用呢?当然事件对象包含了丰富的信息。包括了tap时间发生的位置,发生在哪个元素上,发生的组件的id等。当然touch事件和tap事件的event数据略有差异,这个不用细说,大家最好的办法是用
console.log(event)
打印然后获得自己想要的数据。
对象结构为:
Object {type: "touchStart", timeStamp: 1535471473292, target: Object, currentTarget: Object, touches: Array(1)…}
给事件处理器传值
我们知道在原生js中我们可以这样传值
handle(name) {console.log(name)
}
但是在支付宝小程序中我们不能这样写。而是要给组件设置data-*属性。例如:
<button data-site="https://blog.csdn.net/marswill" data-user-name="Mr.Wei" type="primary" size="mini" onTap="defaultTap">点击我</button>
那么在这儿data-site和data-user-name就是我们附加的数据,怎么样获取呢?
handle(event) {console.log(event.target.dataset.site);console.log(event.target.dataset.userName); //注意中划线要处理成小驼峰法
}
事件这部分比较简单,如果有更多疑惑请查看我的视频教程https://edu.csdn.net/course/detail/5750或者给我发邮件交流。
支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)相关推荐
- 打通高德、UC、微博,支付宝小程序组建“阿里联盟军”对抗微信小程序?| 技术头条...
作者丨Suvi 责编 | 伍杏玲 本文经授权转载自晓程序速报(ID:xcxsubao) [CSDN 编者按]支付宝小程序虽起步时未占到先机,但其后劲十足,近期更是频频发力,大有后来者居上之势.例如阿里 ...
- 小程序开发过程中常见问题[微信小程序、支付宝小程序]
小程序开发过程中常见问题[微信小程序.支付宝小程序] 正文 一.样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二.使用自适应单 ...
- 微信小程序和支付宝小程序对应的差异
记录将微信小程序代码挪到支付宝小程序的过程中遇到的一些支付宝小程序和微信小程序的差异,以免每次都去官方文档查. 1.文件后缀名 微信小程序的四个文件后缀为.js..json..wxml..wxss,支 ...
- 商家又一必争之地!支付宝小程序一周年,带来哪些机遇?
如果说2017年是小程序元年,那么2018年很可能将成为小程序的爆发年. 微信小程序.支付宝小程序.百度智能小程序,BAT三大巨头全面进入小程序赛道,华为.vivo.小米等九大国产手机厂商还在今年春天 ...
- uniApp APP跳转支付宝小程序,uniapp唤起支付小程序
ios上支付宝的自定义协议是alipay Android上支付宝的自定义协议是alipays #ifdef APP-PLUSlet alipayUrl = null;if (uni.getSystem ...
- 微信小程序系列2——小程序页面渲染和逻辑的关系
前言 小程序是基于双线程模型的,在这个模型中,小程序的逻辑层与渲染层分开在不同的线程运行,这跟传统的Web 单线程模型有很大的不同,使得小程序架构上多了一些复杂度,也多了一些限制,同时具备渲染快. ...
- 微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组 注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
- 小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录 一.WXML 模板语法 数据绑定 事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式 在事件处理函数中为 ...
- 支付宝、微信、百度的小程序新逻辑
配图来自Cnava可画 从小程序运作逻辑的角度上看,其寄生在平台之上,对于平台的引流方面在一定程度上也是大有可观.在流量获取成本逐渐走高的情况下,互联网巨头们自然不会放过任何能给自家头部平台引流的机会 ...
- 微信回应 WeTool 被封事件;支付宝小程序开放直播功能;Raspberry Pi 4 发布 8GB 版本| 极客头条...
整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
最新文章
- 学习excel的使用技巧一空格替换为0
- k8s组件说明:主要组件统一说明
- Unity3damp;amp;C#分布式游戏服务器ET框架介绍-组件式设计
- Linux C编程学习--main()函数简析
- php分享二十四:数组
- 如何清理qt源码_Qt+FFmpeg本地录制音频
- 数据可视化过程中常见的错误类型
- 使用大数据分析需避免哪些错误
- Hadoop完全分布式 小bug -no.1 为啥我的集群只显示一个datanode!
- 码农面试智力题及答案
- Log4j自定义日志级别
- hive desc table_name commet乱码问题解决
- naxtTick获取服务器数据
- 解除控制伽卡他卡控制
- 【Aladdin-Unity3D-Shader编程】之六-模型实时阴影
- 机器学习python基础(一)魔法命令
- 火狐浏览器书签工具栏图标_在Firefox书签工具栏中浓缩书签
- 理解字节序 [Understanding Big and Little Endian Byte Order]
- python Matplotlib 控制x轴和y轴都为整数
- 医院计算机五大应用系统,医院计算机五大应用系统
热门文章
- java版孢子_我的世界Java版21w05a
- MOT多目标跟踪算法总结(一)待完善
- js怎样设置td中input的css样式,js动态平添的行中td的样式不起作用
- Android应用课程设计题目(毕业设计,Androidstudio期末作业)
- Android文件存储的问题:ClassLoader和实现Parcelable接口后 详解及用途
- legoloam总结(三)
- 南开大学计算机控制工程学院院长,南开大学计算机与控制工程学院研究生导师简介-任博...
- RabbitMQ入门到集成SpringBoot
- 三国杀神吕蒙涉猎平均能上几张牌?
- 如何删除计算机新用户名和密码是什么,教你Windows10系统管理员账户密码怎么删除...