微信小
程序 触控
事件: 微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。 接下来把文档copy过来 原文地址:https://mp/debug/wxadoc/dev/framework/view/wxml/event.html 》》》什么是事件 事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如id, dataset, touches。事件的使用方式 在组件中绑定一个事件处理函数。 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。 <view id="tapTest" data-hi="MINA" bindtap="tapName">Click me! </view> 在相应的Page定义中写上相应的事件处理函数,参数是event。 Page({tapName: function(event) {console.log(event)} }) 可以看到log出来的信息大致如下: { "type": "tap", "timeStamp": 1252, "target": {"id": "tapTest","offsetLeft": 0,"offsetTop": 0,"dataset": {"hi": "MINA"} }, "currentTarget": {"id": "tapTest","offsetLeft": 0,"offsetTop": 0,"dataset": {"hi": "MINA"} }, "touches": [{"pageX": 30,"pageY": 12,"clientX": 30,"clientY": 12,"screenX": 112,"screenY": 151 }], "detail": {"x": 30,"y": 12 } } 事件详解 事件分类 事件分为冒泡事件和非冒泡事件: 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。 》》》事件分类 touchstart 手指触摸touchmove 手指触摸后移动touchcancel 手指触摸动作被打断,如d窗和来电提醒touchend 手指触摸动作结束tap 手指触摸后离开longtap 手指触摸后后,超过350ms离开》》》事件绑定 事件绑定的写法同组件的属性,以 key、value 的形式。 key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstartvalue 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。上面简单介绍了小程序事件基础,是时候彰显"事件"的威力: 单击(tap)双击(dbtap)长按(longtap)滑动多点触控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组成 坐标图: 以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕,Y轴越往下坐标值越大(注意跟数学象限的区别)。假设A点为touchstart事件触摸点,坐标为A(ax,ay),然后手指向上滑动到点B(bx,by),就满足条件by <ay 同理,向右滑动到C(cx,cy),满足cx >ax;向下滑动到D(dx,dy),满足dy >ay;向左移动到E(ex,ey)满足ex <ax.计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n计算r = m/n,如果r >1,视为向上滑动。同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比,得出向右向下向左的滑动。以上没考虑r为1的情况。 <view> <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button> </view> 5.多点触控 由于模拟器尚不支持多点触控,内测开放后,继续补充。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
首页 打开小程序屏幕变暗怎么回事(打开小程序屏幕变黑)
打开小程序屏幕变暗怎么回事(打开小程序屏幕变黑)
祝融百科知识 • 2022-09-22 17:24:20 • 标签: 手机 待机 原因 变暗 按键 软件 电路 黑屏 屏幕 问题 程序
以微信小程序为例,其打开小程序屏幕变暗有两种原因:一种是使用中黑屏,一种是待机黑屏。
以微信小程序为例,其打开小程序屏幕变暗有两种原因:一种是使用中黑屏,一种是待机黑屏。 以下是详细介绍:
1、使用中黑屏大都是由下载的第三方软件引起的,本机自带软件出现此现象的情况较少。 其产生的原因:
(1)有可能是软件本身有问题,例如软件自身不稳定或者与手机系统不匹配,卸载该软件即可解决这一问题;
猜你喜欢:
电脑屏幕自动变暗是怎么回事?(电脑屏幕自动变暗是怎么回事)手机屏幕突然变暗怎么回事(苹果手机屏幕突然变暗怎么回事)看小说屏幕就变暗,离开小说界面就恢复正常椰子如何打开(椰子如何打开小技巧)贴了防偷窥膜之后屏幕变暗怎么回事打开小艺(小艺使用技巧)
(2)如果是软件之间不能兼容,就需要一个软件一个软件地安装与卸载,实验检查是哪个软件的问题。 找到了就将其卸载,问题基本就能解决。
2、待机中黑屏,主要是由于手机长时间检测不到按键触发信号就会自动关闭屏幕,也就是待机,需要使用手机时按键会激活手机内的电路,然后屏幕点亮。
黑屏的原因有可能因为手机系统发出点亮屏幕的指令,但由于电路延迟发送导致屏幕不能及时反应,所以造成黑屏。 这种情况下先不用着急恢复,稍等片刻或用身边的电话拨打已黑屏的手机,如果可以打通,这个问题也就解决了。
评论列表(0条)