时间:2021-05-18
微信小程序 触控事件:
微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。
接下来把文档copy过来
原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
》》》什么是事件
事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数,参数是event。
可以看到log出来的信息大致如下:
事件详解
事件分类
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
》》》事件分类
》》》事件绑定
事件绑定的写法同组件的属性,以 key、value 的形式。
上面简单介绍了小程序事件基础,是时候彰显"事件"的威力:
1.单击
单击事件由touchstart、touchend组成,touchend后触发tap事件。
<view> <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button></view>mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')},mytap: function(e){ console.log(e.timeStamp + '- tap')}2.双击
双击事件由两个单击事件组成,两次间隔时间小于300ms认为是双击;微信官方文档没有双击事件,需要开发者自己定义处理。
<view> <button type="primary" bindtap="mytap">点我吧</button></view>3.长按
长按事件手指触摸后,超过350ms再离开。
<view> <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" bindtouchend="mytouchend" bindtap="mytap">点我吧</button></view>mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')},//长按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap') },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')},mytap: function(e){ console.log(e.timeStamp + '- tap')}单击、双击、长按属于点触事件,会触发touchstart、touchend、tap事件,touchcancel事件只能在真机模拟,不多说了。
事件 触发顺序 单击 touchstart → touchend → tap 双击 touchstart → touchend → tap → touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap
4.滑动
手指触摸屏幕并移动,为了简化起见,下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成
坐标图:
以上没考虑r为1的情况。
<view> <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button></view>5.多点触控
由于模拟器尚不支持多点触控,内测开放后,继续补充。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属
系列文章:微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数
系列文章:微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数
系列文章:微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数
系列文章:微信小程序教程之WXSS微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数